Need help with create-content-loader?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

danilowoz
949 Stars 184 Forks 519 Commits 4 Opened issues

Description

✏️ Tool to create your own react-content-loader easily.

Services available

!
?

Need anything else?

Contributors list

# 5,754
netlify
TypeScr...
css-arc...
Storybo...
166 commits
# 216,813
C++
magento
Laravel
Gradle
12 commits
# 354,115
React
CSS
TypeScr...
svg
6 commits
# 1,528
React N...
ugui
graysca...
fish-sh...
5 commits
# 392,802
React
CSS
TypeScr...
svg
4 commits
# 392,574
React
CSS
TypeScr...
svg
4 commits
# 392,575
React
CSS
TypeScr...
svg
4 commits
# 348,910
React
CSS
TypeScr...
svg
3 commits
# 420,374
React
CSS
TypeScr...
svg
3 commits
# 92,297
HTML
TypeScr...
Google
Babel
3 commits
# 286,602
React
react-t...
docusau...
HTML
2 commits
# 458,363
React
CSS
TypeScr...
svg
2 commits
# 350,846
convolu...
Tensorf...
deep-ne...
Shell
2 commits
# 122,001
HTML
Svelte
codesan...
Shell
2 commits
# 326,597
Shell
React
CSS
TypeScr...
2 commits
# 434,219
React
CSS
TypeScr...
svg
2 commits
# 80,437
React
TypeScr...
React N...
render-...
2 commits
# 450,427
React
CSS
TypeScr...
svg
2 commits
# 457,379
React
CSS
TypeScr...
svg
2 commits
# 458,878
React
CSS
TypeScr...
svg
2 commits

danilowoz.com/create-content-loader

Introduction

react-content-loader it is a SVG component to create placeholder loading, like Facebook cards loading or also known as skeleton UI. So using this online tool you will be able to create your own loader easily. You just need to draw using the canvas and get the snippet ready for:

  • ReactJS;
  • React Native;
  • VueJS;
  • Angular;
  • SVG/HTML;
  • Maybe Gif someday;

Still not clear? Read the documentation of react-content-loader

Community loading

Have you made an amazing loading and you're proud of it? Your contribution is welcome. Add your loading code in the gallery following the steps bellow and help the community grows.

How to insert a loader?

  1. Build your custom amazing loader;
  2. Create a file with a custom name, here;
  3. Use the following boilerplate (don't forget to fill the metadata);
  4. Insert the file in the gallery, here;
  5. Open a pull request, don't you know how to do it? Read this;

Boilerplate

import React from 'react'
import ContentLoader from 'react-content-loader'

const NAME_OF_LOADER = props => { return ( // your loader ) }

NAME_OF_LOADER.metadata = { name: WRITEHERE, // My name github: WRITEHERE, // Github username description: WRITEHERE, // Little tagline filename: WRITEHERE, // filename of your loader }

export default NAME_OF_LOADER


Development

Available Scripts

This project was bootstrapped with Create React App, so in the project directory, you can run:

npm install && npm run dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Ajay Poshak

🖋

Danilo Woznica

🚧

Rabin Gaire

🖋

RJavlonbek

🖋

Lucas Padovan

🖋

Wiput Pootong

🖋

Thomas Knickman

🖋

Nick

🖋

Gaurav Agarwal

🖋

EGOIST

🖋

danielerota

🖋

EslavaDev

🖋

Ahsan Ullah

🖋

Afrizal Fikri

🖋

Muhammad Bilal

🖋

Ali Daghighi

🖋

Victoria Mei

🖋

adititipnis

🖋

Pablo Maribondo

🖋

Sammy Baraka

🖋

Baptiste Firket

🖋

aej11a

🖋

Royal Bhati

🖋

Akash Bambhaniya

🖋

Phát Mai

🖋

Sarah Ann Garcia

🖋

BYIRINGIRO Emmanuel

🖋

clariokids

🖋

Luísa

🖋

Marius Jørgensen

🖋

Ines Guerrero

🖋

Arthur Falcão

🖋

Cristina Dias

🖋

Mr-sgreen

🖋

asehdev

🖋

toiladoong

🖋

swatana3

🖋

Chris Fulgencio

🖋

Fouad Khatib

🖋

Bilal Ahmed

🖋

Pushp Vashisht

🖋

Sridhar Easwaran

🖋

Pratik Pathak

🖋

Caio Davi

🖋

Yusuf Özlü

🖋

Arif Uddin

🖋

Hassan Tijani.A

🖋

Andreas Pelekoudas

💻

Pranay Binju

🖋

rivkyb

🖋

Nikhil Anand

🖋

Alan Hurtarte

🖋

ghettifish

🖋

duyphuong

🖋

coktopus

🖋

Rene Hinojosa

🖋

Justin Irabor

🖋

Maxgit3

🖋 💻

Washington Soares

💻

ravisankarchinnam

🖋

Emrah Akçelik

🖋

Vignesh Elangovan

🐛 🖋

itsmeshaheerali

🖋

Ashiru Olawale

🖋

Emmanuel De Saint Steban

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.