็ฎไฝไธญๆ | English
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
After version 1.7.4-alpha.2, the project was refactored with typescript.
npm install react-loadingg
import { BoxLoading } from 'react-loadingg';
<BoxLoading />;
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 | 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 | โ | โ | ๐จ | โ |
Running the project for the first time
$ git clone https://github.com/sixiaodong123/react-loading
$ npm run dev
P.S.
: If startup fails, please installyarn
first
npm install -g yarn
Running the project for the second time
npm run storybook
$ npm run build
$ npm run release
- 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 ?.
- Module Function Development (feature / xxx)
- Bug fixes (bug / xxx)
Tryreact-loading-demand, or load on demand in the following way
import BabelLoading from 'react-loadingg/lib/BabelLoading'