Summer-andy / React Loading
Licence: mit
Build a smooth and lightweight react component loading with css ๐ .
Stars: โญ 234
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Loading
Gatsby Starter Typescript Deluxe
A Gatsby starter with TypeScript, Storybook, Styled Components, Framer Motion, Jest, and more.
Stars: โญ 50 (-78.63%)
Mutual labels: styled-components, storybook
Styled Typography
Typograpy components for react and styled-components
Stars: โญ 113 (-51.71%)
Mutual labels: component, styled-components
French Press Editor
โ An offline-first rich text editor component.
Stars: โญ 69 (-70.51%)
Mutual labels: component, styled-components
Orbit
React components of open-source Orbit design system by Kiwi.com
Stars: โญ 774 (+230.77%)
Mutual labels: component, styled-components
Storybook Addon Styled Component Theme
storybook addon
Stars: โญ 168 (-28.21%)
Mutual labels: styled-components, storybook
Quantum
The default pack of components and layout principles that dictates Catho Frontend applications.
Stars: โญ 39 (-83.33%)
Mutual labels: styled-components, storybook
Meteor Apollo Starter Kit
Meteor, Apollo, React, PWA, Styled-Components boilerplate
Stars: โญ 91 (-61.11%)
Mutual labels: styled-components, storybook
weather-styled-icon
โ
๏ธโ๏ธ๐ง๐จin โ๏ธ
Stars: โญ 23 (-90.17%)
Mutual labels: styled-components, storybook
Storybook Addon
Develop themable components with Emotion/Styled Components/Material-UI with help of Storybook & React Theming
Stars: โญ 122 (-47.86%)
Mutual labels: styled-components, storybook
React95
A React components library with Win95 UI
Stars: โญ 1,779 (+660.26%)
Mutual labels: styled-components, storybook
React Component Library
A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook
Stars: โญ 313 (+33.76%)
Mutual labels: component, storybook
Lerna Yarn Workspaces Monorepo
๐ A Monorepo with multiple packages and a shared build, test, and release process.
Stars: โญ 201 (-14.1%)
Mutual labels: styled-components, storybook
eleventy-react
Use React components in Eleventy.
Stars: โญ 66 (-71.79%)
Mutual labels: styled-components, storybook
Moveit
๐ NLW #4 | React+ TypeScript + NextJS + StyledComponents + Firebase + MongoDb +Axios
Stars: โญ 39 (-83.33%)
Mutual labels: styled-components, storybook
personal-blog
โ๏ธ ไธชไบบๆๆฏๅๅฎข
Stars: โญ 79 (-66.24%)
Mutual labels: styled-components, storybook
storybook-styled-components
No description or website provided.
Stars: โญ 76 (-67.52%)
Mutual labels: styled-components, storybook
chic-ui
Lightweight CSS-in-JS styled UI Component Library for React
Stars: โญ 39 (-83.33%)
Mutual labels: styled-components, storybook
Aura.ui
A Library with a lot of Controls for AvaloniaUI
Stars: โญ 114 (-51.28%)
Mutual labels: component, styled-components
2019 12
๐ ๊ธ์ฆํ๋ ํธ๋ํฝ์๋ ์์ ์ ์ธ ์์ฝ ์๋น์ค, Atomic Pattern์ ์ ์ฉํ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ, ์ค์ฉ์ ์ธ Testing์ ์ฃผ์ ๋ก ํ๋ ์ด๋ฒคํธ ์๋น์ค
Stars: โญ 169 (-27.78%)
Mutual labels: styled-components, storybook
A React-based Loading animation component library
็ฎไฝไธญๆ | 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
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 installyarn
first
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
BabelLoading
๏ผbut it seems that I have to import
the whole react-loadingg
:
๐ I just want to use react-loading-demand, or load on demand in the following way
Tryimport 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].