Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

NotificationsYou must be signed in to change notification settings

danilowoz/create-content-loader

Repository files navigation

skeletonreact.com

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 thisonline 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 ofreact-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

importReactfrom'react'importContentLoaderfrom'react-content-loader'const__NAME_OF_LOADER__=props=>{return(<ContentLoaderheight={40}width={1060}backgroundColor="#d9d9d9"foregroundColor="#ecebeb"{...props}>      // your loader</ContentLoader>)}__NAME_OF_LOADER__.metadata={name:'__REPLACE_ME__',// My namegithub:'__REPLACE_ME__',// Github usernamedescription:'__REPLACE_ME__',// Little taglinefilename:'__REPLACE_ME__',// filename of your loader}exportdefault__NAME_OF_LOADER__

Development

Available Scripts

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

npm install && npm run dev

Runs the app in the development mode.
Openhttp://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):


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 theall-contributors specification. Contributions of any kind welcome!

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors89

Languages


[8]ページ先頭

©2009-2025 Movatter.jp