dmitrymorozoff / React Spinners Kit
Licence: mit
A collection of loading spinners with React.js
Stars: ✭ 158
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Spinners Kit
Progress bar
Command-line progress bars and spinners for Elixir.
Stars: ✭ 281 (+77.85%)
Mutual labels: spinner, progressbar, spinners
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+60.76%)
Mutual labels: react-components, spinner, spinners
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (-7.59%)
Mutual labels: react-components, spinner, spinners
Alive Progress
A new kind of Progress Bar, with real-time throughput, ETA, and very cool animations!
Stars: ✭ 2,940 (+1760.76%)
Mutual labels: spinner, progressbar, spinners
ZXLoadingView
🍕ZXLoadingView is an iOS progress-activity
Stars: ✭ 14 (-91.14%)
Mutual labels: spinner, spinners
React Nprogress
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173 (+9.49%)
Mutual labels: spinner, progressbar
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-86.71%)
Mutual labels: spinner, spinners
React Spinners
A collection of loading spinner components for react
Stars: ✭ 2,054 (+1200%)
Mutual labels: progressbar, spinners
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-29.75%)
Mutual labels: spinner, spinners
spinner
A simple, configurable, multi-platform spinner
Stars: ✭ 42 (-73.42%)
Mutual labels: spinner, spinners
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+389.87%)
Mutual labels: spinner, spinners
Aframe Preloader Component
A preloading bar that automatically displays while scene assets load.
Stars: ✭ 27 (-82.91%)
Mutual labels: spinner, spinners
nanospinner
🌀 The simplest and tiniest terminal spinner for Node.js
Stars: ✭ 108 (-31.65%)
Mutual labels: spinner, spinners
Spinner
Go (golang) package with 90 configurable terminal spinner/progress indicators.
Stars: ✭ 1,637 (+936.08%)
Mutual labels: spinner, progressbar
Ng Spin Kit
SpinKit (http://tobiasahlin.com/spinkit/) spinners for Angular
Stars: ✭ 90 (-43.04%)
Mutual labels: spinner, spinners
Materialspinner
Implementation of a Material Spinner for Android with TextInputLayout functionalities
Stars: ✭ 107 (-32.28%)
Mutual labels: spinner, spinners
Synergy
Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
Stars: ✭ 146 (-7.59%)
Mutual labels: react-components
Loader
This is a library having a collection of different types of CSS3 loaders , spinners
Stars: ✭ 149 (-5.7%)
Mutual labels: spinners
Rxtool
Android开发人员不得不收集的工具类集合 | 支付宝支付 | 微信支付(统一下单) | 微信分享 | Zip4j压缩(支持分卷压缩与加密) | 一键集成UCrop选择圆形头像 | 一键集成二维码和条形码的扫描与生成 | 常用Dialog | WebView的封装可播放视频 | 仿斗鱼滑动验证码 | Toast封装 | 震动 | GPS | Location定位 | 图片缩放 | Exif 图片添加地理位置信息(经纬度) | 蛛网等级 | 颜色选择器 | ArcGis | VTPK | 编译运行一下说不定会找到惊喜
Stars: ✭ 11,567 (+7220.89%)
Mutual labels: progressbar
Fluentui
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Stars: ✭ 12,587 (+7866.46%)
Mutual labels: react-components
React Spinners Kit
A collection of loading spinners built with styled-components.
Live Demo
- To check out live examples visit https://dmitrymorozoff.github.io/react-spinners-kit/
🚀 Installation
Install react-spinners-kit
using npm.
npm install --save react-spinners-kit
or if you prefer yarn
yarn add react-spinners-kit
👨🏻💻 Usage
import React from "react";
import ReactDOM from "react-dom";
import { PushSpinner } from "react-spinners-kit";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
};
}
render() {
const { loading } = this.state;
return <PushSpinner size={30} color="#686769" loading={loading} />;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
📃 PropTypes and Default Props
- Each spinner accepts a
loading
prop as a boolean. - The
loading
prop defaults totrue
. - The loader will not render anything if
loading
isfalse
.
Spinner | size: number | color: string | frontColor: string | backColor: string | sizeUnit: string |
---|---|---|---|---|---|
BallSpinner | 40 |
#00ff89 |
- | - | px |
BarsSpinner | 40 |
#00ff89 |
- | - | px |
CircleSpinner | 30 |
#fff |
- | - | px |
CubeSpinner | 25 |
- | #00ff89 |
#686769 |
px |
DominoSpinner | 100 |
#686769 |
- | - | px |
FillSpinner | 20 |
#686769 |
- | - | px |
FireworkSpinner | 40 |
#fff |
- | - | px |
FlagSpinner | 40 |
#fff |
- | - | px |
GridSpinner | 40 |
#fff |
- | - | px |
GuardSpinner | 40 |
- | #00ff89 |
#686769 |
px |
HeartSpinner | 40 |
#fff |
- | - | px |
ImpulseSpinner | 40 |
- | #00ff89 |
#686769 |
px |
PulseSpinner | 40 |
#fff |
- | - | px |
PushSpinner | 30 |
#686769 |
- | - | px |
SequenceSpinner | 40 |
- | #00ff89 |
#686769 |
px |
SphereSpinner | 30 |
#fff |
- | - | px |
SpiralSpinner | 40 |
#00ff89 |
#686769 |
px |
|
StageSpinner | 40 |
#fff |
- | - | px |
SwapSpinner | 40 |
#686769 |
- | - | px |
WaveSpinner | 30 |
#fff |
- | - | px |
ClapSpinner | 30 |
- | #00ff89 |
#686769 |
px |
RotateSpinner | 45 |
#00ff89 |
- | - | px |
SwishSpinner | 40 |
- | #4b4c56 |
#fff |
px |
GooSpinner | 55 |
#fff |
- | - | px |
CombSpinner | 100 |
#fff |
- | - | px |
PongSpinner | 60 |
#4b4c56 |
- | - | px |
RainbowSpinner | 50 |
#fff |
- | - | px |
RingSpinner | 30 |
#00ff89 |
- | - | px |
HoopSpinner | 45 |
#4b4c56 |
- | - | px |
FlapperSpinner | 30 |
#00ff89 |
- | - | px |
MagicSpinner | 70 |
#fff |
- | - | px |
JellyfishSpinner | 60 |
#4b4c56 |
- | - | px |
TraceSpinner | 70 |
- | #00ff89 |
#4b4c56 |
px |
ClassicSpinner | 30 |
#fff |
- | - | px |
MetroSpinner | 40 |
#fff |
- | - | px |
WhisperSpinner | 50 |
#fff |
#4b4c56 |
#00ff89 |
px |
Development
You can also test the components locally by cloning this repo and doing the following steps:
Install dependencies from package.json
:
npm install
Runs the app in the development mode.
Open http://localhost:1234 to view it in the browser.
npm start
Run linter
npm run lint
💻 Contributing
- Pull requests and ⭐ stars are always welcome
- For bugs and feature requests, please create an issue
- Lint and test your code
License
MIT
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].