Access the online tool

Create React Content Loader

Have you heard about react-content-loader? It's a SVG component to create placeholder loading, like Facebook cards loading or also known as skeleton UI. So now you can use this online tool to create your own loader easily. You just need to draw using the canvas or code using the live editing!

Read the documentation of react-content-loader

Share your loader with the community.

That's is a way to share your custom loader with the React community. Besides you can help the other developers to create amazing loader to their interfaces. There are so many ways to build a content loader, show off here!

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 PR;

Boilerplate

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

const __NAME_OF_LOADER__ = props => {
  return (
    <ContentLoader
      height={40}
      width={1060}
      speed={2}
      backgroundColor="#d9d9d9"
      foregroundColor="#ecebeb"
      {...props}
    >
      // your loader
    </ContentLoader>
  )
}

__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__

It'll be amazing to see the creativity of the community!

Available Scripts

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

npm start

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 🖋	s76552 🖋

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