Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

A React-based Loading animation component library

Introduction

React-Loading is a React-based Loading animation component library includes many exquisite and beautiful loading components. It will effectively relieve the user's anxiety when you give loading dynamics tips at the appropriate place and moment in your project. This component library supports on-demand loading, so pick a favorite Loading component now to enrich your project ~

๐ŸŽ‰ check demo

Warning

After version 1.7.4-alpha.2, the project was refactored with typescript.

Quick Start

๐Ÿ›  Install

npm install react-loadingg

๐Ÿ“ฆ Use

import { BoxLoading } from 'react-loadingg';

<BoxLoading />;

Components related

๐Ÿ“• API

Parameter Description Type Default
color Set color, support hexadecimal and RGB string '#00adb5'
speed Set animation speed number(s) -
size Set the component size, the optional value is small default large string 'default'
style Style the component Object -

๐Ÿ“ Components list

components color speed size style
BabelLoading โœ… โœ… โœ… โœ…
BlockLoading โœ… โœ… โœ… โœ…
BlockReserveLoading โœ… โœ… โœ… โœ…
BoxLoading โœ… โœ… โœ… โœ…
CircleLoading โœ… โœ… โœ… โœ…
CircleToBlockLoading โœ… โœ… โœ… โœ…
CommonLoading โœ… โœ… โœ… โœ…
DisappearedLoading โœ… โœ… โœ… โœ…
LoopCircleLoading โœ… โœ… โœ… โœ…
NineCellLoading โœ… โœ… โœ… โœ…
TouchBallLoading โœ… โœ… โœ… โœ…
TransverseLoading โœ… โœ… โœ… โœ…
WaveLoading โœ… โœ… โœ… โœ…
WaveTopBottomLoading โœ… โœ… โœ… โœ…
WindMillLoading โœ… โœ… โœ… โœ…
JumpCircleLoading โœ… โœ… โœ… โœ…
MeteorRainLoading โœ… โœ… โœ… โœ…
RotateCircleLoading โœ… โœ… โœ… โœ…
StickyBallLoading โœ… โœ… โœ… โœ…
SemipolarLoading โœ… โœ… โœ… โœ…
SolarSystemLoading โœ… โœ… โœ… โœ…
LadderLoading โœ… โœ… โœ… โœ…
HeartBoomLoading โœ… โœ… โœ… โœ…
RollBoxLoading โœ… โœ… โœ… โœ…
RectGraduallyShowLoading โœ… โœ… โœ… โœ…
PointSpreadLoading โœ… โœ… โœ… โœ…
ThreeHorseLoading โœ… โœ… โœ… โœ…
PassThrouthLoading โœ… โœ… โœ… โœ…
CoffeeLoading โœ… โœ… โœ… โœ…
BatteryLoading โœ… โœ… โœ… โœ…
DiamonLoading โœ… โœ… ๐Ÿ”จ โœ…
EatLoading โœ… โœ… ๐Ÿ”จ โœ…

โŒจ๏ธ Participate in development

Running the project for the first time

$ git clone https://github.com/sixiaodong123/react-loading
$ npm run dev

P.S.: If startup fails, please installyarnfirst

npm install -g yarn

Running the project for the second time

npm run storybook

๐Ÿ”จ Component packaging

$ npm run build

๐ŸŽ‰ Component release

$ npm run release

๐Ÿค Component submission specifications

  • perf: optimization related, such as improving performance and experience
  • feat: new feature
  • fix: fix bug
  • docs: add or change documentation
  • style: format (changes that do not affect code execution)
  • refactor: refactoring (neither new features nor code changes that modify bugs)
  • test: add tests
  • chore: changes in the build process or aids
  • upgrade: third-party library upgrades
  • revert: rollback
  • scope: the scope of the commit, such as: route, component, utils, build ...
  • merge: Merge branch ? of ?.

โค๏ธ Component branch management

  • Module Function Development (feature / xxx)
  • Bug fixes (bug / xxx)

FAQ

๐Ÿ›Ž I just want to use BabelLoading๏ผŒbut it seems that I have to import the whole react-loadingg:
Tryreact-loading-demand, or load on demand in the following way
import BabelLoading from 'react-loadingg/lib/BabelLoading'
๐Ÿ›Ž The component is completely centered by default. If you want to modify the component's style, the component's default completely centered style will be overwritten.

About

Build a smooth and lightweight react component loading with css ๐ŸŽ‰ .

Topics

Resources

License

Packages

No packages published