Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 4 days 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 7 years ago)
Default Branch: master
Last Pushed: 2024-11-13T19:43:24.000Z (2 months ago)
Last Synced: 2025-01-10T00:07:35.649Z (11 days ago)
Topics: facebook-cards-loaders, hacktoberfest, loader, loading, react, svg
Language: JavaScript
Homepage: https://skeletonreact.com/
Size: 53.2 MB
Stars: 1,232
Watchers: 11
Forks: 291
Open Issues: 18
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome-for-beginners - React-content-loader - content-loader easily. (JavaScript)
fucking-awesome-for-beginners - React-content-loader - content-loader easily. (JavaScript)

README

        


  

    

  





  skeletonreact.com



## 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!