loading

Build a smooth and lightweight react component loading with css

Dec 15, 2019
Build a smooth and lightweight react component loading with css

react-loading

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 ~

View Demo check new demo View Github

Install

npm install react-loadingg

???? Use

import { BoxLoading } from 'react-loadingg'; <BoxLoading />;

Components related

???? API

ParameterDescriptionTypeDefault
colorSet color, support hexadecimal and RGBstring'#00adb5'
speedSet animation speednumber(s)-
sizeSet the component size, the optional value is small default largestring'default'
styleStyle the componentObject-

???? Components list

componentscolorspeedsizestyle
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

⌨️ 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:
Trybabel-plugin-import, 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.

GitHub

Recommended