Home

Awesome

<p align="center"> <a href="https://skeletonreact.com/"> <img width="800px" align="center" src="https://user-images.githubusercontent.com/4838076/115597774-8e0ccc00-a2d1-11eb-853d-f24cfe9d4fea.png" title="Create Content Loader" /> </a> </p> <p align="center"> <a href="https://skeletonreact.com/">skeletonreact.com</a> </p>

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:

Still not clear? Read the documentation of 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;
  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 (
    <ContentLoader
      height={40}
      width={1060}
      backgroundColor="#d9d9d9"
      foregroundColor="#ecebeb"
      {...props}
    >
      // your loader
    </ContentLoader>
  )
}

__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, so in the project directory, you can run:

npm install && npm run dev

Runs the app in the development mode.<br> Open http://localhost:5173 to view it in the browser.

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://twitter.com/poshakajay"><img src="https://avatars2.githubusercontent.com/u/7375457?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ajay Poshak</b></sub></a><br /><a href="#content-AjayPoshak" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://danilowoz.com"><img src="https://avatars1.githubusercontent.com/u/4838076?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Danilo Woznica</b></sub></a><br /><a href="#maintenance-danilowoz" title="Maintenance">🚧</a></td> <td align="center"><a href="http://rabingaire.com.np"><img src="https://avatars3.githubusercontent.com/u/17409675?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rabin Gaire</b></sub></a><br /><a href="#content-rabingaire" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/RJavlonbek"><img src="https://avatars0.githubusercontent.com/u/33687903?v=4?s=100" width="100px;" alt=""/><br /><sub><b>RJavlonbek</b></sub></a><br /><a href="#content-RJavlonbek" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/LucasPadovan"><img src="https://avatars0.githubusercontent.com/u/993291?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lucas Padovan</b></sub></a><br /><a href="#content-LucasPadovan" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://cv.wiput.me"><img src="https://avatars3.githubusercontent.com/u/8299278?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Wiput Pootong</b></sub></a><br /><a href="#content-wiput1999" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://www.thomasknickman.com"><img src="https://avatars1.githubusercontent.com/u/2933988?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Thomas Knickman</b></sub></a><br /><a href="#content-tknickman" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="https://github.com/nicholascm"><img src="https://avatars2.githubusercontent.com/u/8185671?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nick</b></sub></a><br /><a href="#content-nicholascm" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/gauravagarwal2704"><img src="https://avatars0.githubusercontent.com/u/5871983?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gaurav Agarwal</b></sub></a><br /><a href="#content-gauravagarwal2704" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://patreon.com/egoist"><img src="https://avatars2.githubusercontent.com/u/8784712?v=4?s=100" width="100px;" alt=""/><br /><sub><b>EGOIST</b></sub></a><br /><a href="#content-egoist" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/danielerota"><img src="https://avatars2.githubusercontent.com/u/50356649?v=4?s=100" width="100px;" alt=""/><br /><sub><b>danielerota</b></sub></a><br /><a href="#content-danielerota" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/EslavaDev"><img src="https://avatars0.githubusercontent.com/u/31320429?v=4?s=100" width="100px;" alt=""/><br /><sub><b>EslavaDev</b></sub></a><br /><a href="#content-EslavaDev" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://www.upwork.com/o/profiles/users/_~0159ba59f83310f587/"><img src="https://avatars0.githubusercontent.com/u/39671392?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahsan Ullah</b></sub></a><br /><a href="#content-IamAhsanMani" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://koneko096.github.io/"><img src="https://avatars3.githubusercontent.com/u/9217338?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Afrizal Fikri</b></sub></a><br /><a href="#content-koneko096" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="https://github.com/bilalbutt044"><img src="https://avatars3.githubusercontent.com/u/30072504?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Muhammad Bilal</b></sub></a><br /><a href="#content-bilalbutt044" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/alidaghighi"><img src="https://avatars3.githubusercontent.com/u/23290056?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ali Daghighi</b></sub></a><br /><a href="#content-alidaghighi" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://www.youtube.com/victoriamei"><img src="https://avatars2.githubusercontent.com/u/28760234?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Victoria Mei</b></sub></a><br /><a href="#content-vm930" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/adititipnis"><img src="https://avatars0.githubusercontent.com/u/10024684?v=4?s=100" width="100px;" alt=""/><br /><sub><b>adititipnis</b></sub></a><br /><a href="#content-adititipnis" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/pablomaribondo"><img src="https://avatars0.githubusercontent.com/u/29880916?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pablo Maribondo</b></sub></a><br /><a href="#content-pablomaribondo" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/sbaraka"><img src="https://avatars2.githubusercontent.com/u/29280064?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sammy Baraka</b></sub></a><br /><a href="#content-sbaraka" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://baptistefkt.github.io"><img src="https://avatars3.githubusercontent.com/u/18186452?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Baptiste Firket</b></sub></a><br /><a href="#content-baptistefkt" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="https://github.com/aej11a"><img src="https://avatars2.githubusercontent.com/u/10066422?v=4?s=100" width="100px;" alt=""/><br /><sub><b>aej11a</b></sub></a><br /><a href="#content-aej11a" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://royalbhati.github.io/portfolio"><img src="https://avatars3.githubusercontent.com/u/11679543?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Royal Bhati</b></sub></a><br /><a href="#content-royalbhati" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/Akashnb"><img src="https://avatars3.githubusercontent.com/u/42564198?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Akash Bambhaniya</b></sub></a><br /><a href="#content-Akashnb" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/lPaths"><img src="https://avatars0.githubusercontent.com/u/22215743?v=4?s=100" width="100px;" alt=""/><br /><sub><b>PhΓ‘t Mai</b></sub></a><br /><a href="#content-lPaths" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://sgarcia30.github.io/portfolio/"><img src="https://avatars2.githubusercontent.com/u/31214561?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sarah Ann Garcia</b></sub></a><br /><a href="#content-sgarcia30" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://www.fistondesign.com"><img src="https://avatars2.githubusercontent.com/u/46843540?v=4?s=100" width="100px;" alt=""/><br /><sub><b>BYIRINGIRO Emmanuel</b></sub></a><br /><a href="#content-emmbyiringiro" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/clariokids"><img src="https://avatars1.githubusercontent.com/u/7637706?v=4?s=100" width="100px;" alt=""/><br /><sub><b>clariokids</b></sub></a><br /><a href="#content-clariokids" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="http://luisabfs.github.io"><img src="https://avatars1.githubusercontent.com/u/21061462?v=4?s=100" width="100px;" alt=""/><br /><sub><b>LuΓ­sa</b></sub></a><br /><a href="#content-luisabfs" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/marjorg"><img src="https://avatars2.githubusercontent.com/u/5442549?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marius JΓΈrgensen</b></sub></a><br /><a href="#content-marjorg" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/inesgs12"><img src="https://avatars2.githubusercontent.com/u/49120647?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ines Guerrero</b></sub></a><br /><a href="#content-inesgs12" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://linkedin.com/in/arthufalcao/"><img src="https://avatars2.githubusercontent.com/u/22386383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Arthur FalcΓ£o</b></sub></a><br /><a href="#content-arthurfalcao" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://www.webnow.site"><img src="https://avatars2.githubusercontent.com/u/33206445?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Cristina Dias</b></sub></a><br /><a href="#content-crisgit" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/Mr-sgreen"><img src="https://avatars1.githubusercontent.com/u/12498468?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mr-sgreen</b></sub></a><br /><a href="#content-Mr-sgreen" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/asehdev"><img src="https://avatars2.githubusercontent.com/u/50873266?v=4?s=100" width="100px;" alt=""/><br /><sub><b>asehdev</b></sub></a><br /><a href="#content-asehdev" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="https://github.com/toiladoong"><img src="https://avatars0.githubusercontent.com/u/26488763?v=4?s=100" width="100px;" alt=""/><br /><sub><b>toiladoong</b></sub></a><br /><a href="#content-toiladoong" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/swatana3"><img src="https://avatars3.githubusercontent.com/u/8205632?v=4?s=100" width="100px;" alt=""/><br /><sub><b>swatana3</b></sub></a><br /><a href="#content-swatana3" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://fulgenc.io"><img src="https://avatars0.githubusercontent.com/u/13307636?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chris Fulgencio</b></sub></a><br /><a href="#content-fulgencc" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://Fouadkhatib.de"><img src="https://avatars0.githubusercontent.com/u/42405091?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fouad Khatib</b></sub></a><br /><a href="#content-Fouadktb" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/bilal-ahmed-dev"><img src="https://avatars1.githubusercontent.com/u/12461946?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bilal Ahmed</b></sub></a><br /><a href="#content-bilal-ahmed-dev" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://pushp1997.github.io"><img src="https://avatars3.githubusercontent.com/u/19623154?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pushp Vashisht</b></sub></a><br /><a href="#content-pushp1997" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/sridhareaswaran"><img src="https://avatars3.githubusercontent.com/u/9800626?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sridhar Easwaran</b></sub></a><br /><a href="#content-sridhareaswaran" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="https://github.com/PathakPratik"><img src="https://avatars2.githubusercontent.com/u/17859354?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pratik Pathak</b></sub></a><br /><a href="#content-PathakPratik" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/caio-davi"><img src="https://avatars3.githubusercontent.com/u/54697155?s=460&v=4?s=100" width="100px;" alt=""/><br /><sub><b>Caio Davi</b></sub></a><br /><a href="#content-caio-davi" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://cleo.one"><img src="https://avatars0.githubusercontent.com/u/2522722?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yusuf Γ–zlΓΌ</b></sub></a><br /><a href="#content-ozluy" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/Arif-un"><img src="https://avatars2.githubusercontent.com/u/19432983?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Arif Uddin</b></sub></a><br /><a href="#content-Arif-un" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/surepeps"><img src="https://avatars0.githubusercontent.com/u/31157177?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hassan Tijani.A</b></sub></a><br /><a href="#content-surepeps" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/anpel"><img src="https://avatars2.githubusercontent.com/u/16278404?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andreas Pelekoudas</b></sub></a><br /><a href="https://github.com/danilowoz/create-content-loader/commits?author=anpel" title="Code">πŸ’»</a></td> <td align="center"><a href="https://github.com/pranaybinju"><img src="https://avatars2.githubusercontent.com/u/24493084?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pranay Binju</b></sub></a><br /><a href="#content-pranaybinju" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="https://github.com/RivkyBleier"><img src="https://avatars1.githubusercontent.com/u/59883988?v=4?s=100" width="100px;" alt=""/><br /><sub><b>rivkyb</b></sub></a><br /><a href="#content-RivkyBleier" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://linkedin.com/in/nikhil-anand"><img src="https://avatars2.githubusercontent.com/u/36640498?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nikhil Anand</b></sub></a><br /><a href="#content-anandnkhl" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://alanhurtarte.com"><img src="https://avatars1.githubusercontent.com/u/12109719?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alan Hurtarte</b></sub></a><br /><a href="#content-kenny08gt" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/ghettifish"><img src="https://avatars1.githubusercontent.com/u/23620578?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ghettifish</b></sub></a><br /><a href="#content-ghettifish" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/dao-phuong"><img src="https://avatars0.githubusercontent.com/u/26901361?v=4?s=100" width="100px;" alt=""/><br /><sub><b>duyphuong</b></sub></a><br /><a href="#content-dao-phuong" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/coktopus"><img src="https://avatars3.githubusercontent.com/u/63889078?v=4?s=100" width="100px;" alt=""/><br /><sub><b>coktopus</b></sub></a><br /><a href="#content-coktopus" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/rene-ph"><img src="https://avatars1.githubusercontent.com/u/3522527?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rene Hinojosa</b></sub></a><br /><a href="#content-rene-ph" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="http://justinirabor.com"><img src="https://avatars1.githubusercontent.com/u/13500685?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Justin Irabor</b></sub></a><br /><a href="#content-vunderkind" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/Maxgit3"><img src="https://avatars3.githubusercontent.com/u/52330733?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Maxgit3</b></sub></a><br /><a href="#content-Maxgit3" title="Content">πŸ–‹</a> <a href="https://github.com/danilowoz/create-content-loader/commits?author=Maxgit3" title="Code">πŸ’»</a></td> <td align="center"><a href="https://thewashington.dev"><img src="https://avatars3.githubusercontent.com/u/5726140?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Washington Soares</b></sub></a><br /><a href="https://github.com/danilowoz/create-content-loader/commits?author=washingtonsoares" title="Code">πŸ’»</a></td> <td align="center"><a href="https://github.com/ravisankarchinnam"><img src="https://avatars3.githubusercontent.com/u/22351907?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ravisankarchinnam</b></sub></a><br /><a href="#content-ravisankarchinnam" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/emrakc"><img src="https://avatars1.githubusercontent.com/u/19970170?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Emrah AkΓ§elik</b></sub></a><br /><a href="#content-emrakc" title="Content">πŸ–‹</a></td> <td align="center"><a href="http://vigneshwaran.dev"><img src="https://avatars1.githubusercontent.com/u/31436276?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vignesh Elangovan</b></sub></a><br /><a href="https://github.com/danilowoz/create-content-loader/issues?q=author%3Adevevignesh" title="Bug reports">πŸ›</a> <a href="#content-devevignesh" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/itsmeshaheerali"><img src="https://avatars0.githubusercontent.com/u/68652952?v=4?s=100" width="100px;" alt=""/><br /><sub><b>itsmeshaheerali</b></sub></a><br /><a href="#content-itsmeshaheerali" title="Content">πŸ–‹</a></td> </tr> <tr> <td align="center"><a href="https://github.com/walebant"><img src="https://avatars3.githubusercontent.com/u/47564977?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ashiru Olawale</b></sub></a><br /><a href="#content-walebant" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/manudss"><img src="https://avatars.githubusercontent.com/u/1046806?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Emmanuel De Saint Steban</b></sub></a><br /><a href="https://github.com/danilowoz/create-content-loader/commits?author=manudss" title="Code">πŸ’»</a></td> <td align="center"><a href="http://munezero.me"><img src="https://avatars.githubusercontent.com/u/51176044?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Didien Munezero</b></sub></a><br /><a href="#content-didiermunezero" title="Content">πŸ–‹</a></td> <td align="center"><a href="https://github.com/arfath77"><img src="https://avatars.githubusercontent.com/u/30872061?v=4?s=100" width="100px;" alt=""/><br /><sub><b>arfath77</b></sub></a><br /><a href="https://github.com/danilowoz/create-content-loader/commits?author=arfath77" title="Code">πŸ’»</a></td> <td align="center"><a href="https://github.com/ManuelaGar"><img src="https://avatars.githubusercontent.com/u/35504015?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Manuela Garcia</b></sub></a><br /><a href="https://github.com/danilowoz/create-content-loader/commits?author=ManuelaGar" title="Code">πŸ’»</a></td> <td align="center"><a href="https://github.com/sherpaPSX"><img src="https://avatars.githubusercontent.com/u/16719838?v=4?s=100" width="100px;" alt=""/><br /><sub><b>sherpaPSX</b></sub></a><br /><a href="https://github.com/danilowoz/create-content-loader/commits?author=sherpaPSX" title="Code">πŸ’»</a></td> <td align="center"><a href="http://www.abrahamcalsin.com"><img src="https://avatars.githubusercontent.com/u/77748010?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Abraham Calsin</b></sub></a><br /><a href="https://github.com/danilowoz/create-content-loader/commits?author=abrahamcalsin" title="Code">πŸ’»</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

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