Skip to content
Build a smooth and lightweight react component loading with css 🎉 .
JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook docs: 优化组件文档,可以在storybook上直接编辑属性 Dec 1, 2019
src docs: 测试 Jan 1, 2020
tests docs: 添加自动化测试 Jan 1, 2020
.browserslistrc :feat 初始化组件 Nov 5, 2019
.editorconfig :feat 初始化组件 Nov 5, 2019
.eslintignore :feat 初始化组件 Nov 5, 2019
.gitignore feat: boxloading和CircleLoading新增speed Nov 17, 2019
.jest.js docs: 添加自动化测试 Jan 1, 2020
.npmrc
.prettierrc.js :feat 初始化组件 Nov 5, 2019
.travis.yml docs: 添加自动化测试 Jan 1, 2020
.yarnrc :feat 初始化组件 Nov 5, 2019
CHANGELOG.md chore(release): 1.7.1 Jan 12, 2020
LICENSE Create LICENSE Nov 14, 2019
README-zh-Hans.md docs: 更新md Jan 5, 2020
README.md docs: 更新md Jan 5, 2020
_config.yml Set theme jekyll-theme-cayman Dec 28, 2019
babel.config.js :feat 初始化组件 Nov 5, 2019
commitlint.config.js :feat 初始化组件 Nov 5, 2019
logo.png docs: 新增logo Nov 20, 2019
package-lock.json chore(release): 1.7.1 Jan 12, 2020
package.json chore(release): 1.7.1 Jan 12, 2020
tsconfig.json :feat 初始化组件 Nov 5, 2019
webpack.config.js feat: 新增BlockRotateLoading组件 Dec 30, 2019
yarn.lock feat: 新增BlockRotateLoading组件 Dec 30, 2019

README.md

A React-based Loading animation component library

npm version

简体中文 | English

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

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:
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.
You can’t perform that action at this time.