https://github.com/danilowoz/create-content-loader
✏️ Tool to create your own react-content-loader easily.
https://github.com/danilowoz/create-content-loader
facebook-cards-loaders hacktoberfest loader loading react svg
Last synced: 7 months ago
JSON representation
✏️ Tool to create your own react-content-loader easily.
- Host: GitHub
- URL: https://github.com/danilowoz/create-content-loader
- Owner: danilowoz
- Created: 2017-11-15T23:21:07.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-01-13T10:04:12.000Z (11 months ago)
- Last Synced: 2025-04-12T13:54:36.377Z (8 months ago)
- Topics: facebook-cards-loaders, hacktoberfest, loader, loading, react, svg
- Language: JavaScript
- Homepage: https://skeletonreact.com/
- Size: 53.2 MB
- Stars: 1,236
- Watchers: 10
- Forks: 287
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list-for-developers - React-content-loader - first-issue)_ <br> Tool to create your own react-content-loader easily. (JavaScript / Misc)
README
## Introduction
**[react-content-loader](https://github.com/danilowoz/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](https://skeletonreact.com/) 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](https://github.com/danilowoz/react-content-loader)
## 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 loading component;
2. Create a file with a custom name, [here](https://github.com/danilowoz/create-content-loader/tree/master/src/Gallery/insertYourLoaderHere);
3. Use the following boilerplate (don't forget to fill the metadata);
4. Insert the file in the gallery, [here](https://github.com/danilowoz/create-content-loader/blob/master/src/Gallery/insertYourLoaderHere/index.js);
5. Open a pull request, don't you know how to do it? [Read this](https://help.github.com/pt/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request);
#### Boilerplate
```jsx
import React from 'react'
import ContentLoader from 'react-content-loader'
const __NAME_OF_LOADER__ = props => {
return (
// your loader
)
}
__NAME_OF_LOADER__.metadata = {
name: '__REPLACE_ME__', // My name
github: '__REPLACE_ME__', // Github username
description: '__REPLACE_ME__', // Little tagline
filename: '__REPLACE_ME__', // filename of your loader
}
export default __NAME_OF_LOADER__
```
---
## Development
### Available Scripts
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/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:5173](http://localhost:5173) 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](https://allcontributors.org/docs/en/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
💻
Didien Munezero
🖋
arfath77
💻
Manuela Garcia
💻
sherpaPSX
💻
Abraham Calsin
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!