klendi / React Top Loading Bar
Licence: mit
A very simple, highly customisable youtube-like react loader component.
Stars: ✭ 367
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Top Loading Bar
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-69.75%)
Mutual labels: loading, loading-bar
Iprogresshud
An elegant, lightweight and responsive progress HUD for iOS app with very simple usage. Available 32 indicators by NVActivityIndicatorView.
Stars: ✭ 66 (-82.02%)
Mutual labels: loading, loading-bar
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+110.9%)
Mutual labels: loading, loading-bar
vue-loading
Loading bar for Vue.js apps using axios
Stars: ✭ 19 (-94.82%)
Mutual labels: loading, loading-bar
Waitme
jquery plugin for easy creating loading css3/images animations
Stars: ✭ 302 (-17.71%)
Mutual labels: loading
Ngx Skeleton Loader
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
Stars: ✭ 278 (-24.25%)
Mutual labels: loading
React Wait
Complex Loader Management Hook for React Applications
Stars: ✭ 268 (-26.98%)
Mutual labels: loading
koleton
The easiest library to show skeleton screens in an Android app.
Stars: ✭ 84 (-77.11%)
Mutual labels: loading
Ngx Ui Loader
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
Stars: ✭ 368 (+0.27%)
Mutual labels: loading
Jquery Loading
Easily add and manipulate loading states of any element on the page.
Stars: ✭ 321 (-12.53%)
Mutual labels: loading
Skeletonui
☠️ Elegant skeleton loading animation in SwiftUI and Combine
Stars: ✭ 275 (-25.07%)
Mutual labels: loading
Hgrippleradarview
A beautiful radar view to show nearby items (users, restaurants, ...) with ripple animation, fully customizable
Stars: ✭ 309 (-15.8%)
Mutual labels: loading
React Loads
React Loads is a backend agnostic library to help with external data fetching & caching in your UI components.
Stars: ✭ 268 (-26.98%)
Mutual labels: loading
Ssspinnerbutton
Forget about typical stereotypic loading, It's time to change. SSSpinnerButton is an elegant button with a diffrent spinner animations.
Stars: ✭ 357 (-2.72%)
Mutual labels: loading
plain-overlay
The simple library for customizable overlay which covers a page, elements or iframe-windows.
Stars: ✭ 28 (-92.37%)
Mutual labels: loading
Knphotobrowser
📷 图片 || 视频 浏览器(本地和网络) , UIViewController + CollectionView , 完美适配 iPhone 以及 iPad ,屏幕旋转功能 , 适配SDWebImage 5.0
Stars: ✭ 296 (-19.35%)
Mutual labels: loading
Circleprogressview
🎡 CircleProgressView是一个圆形渐变的进度动画控件(支持外环显示刻度,内环随之变化,配置参数完全可配),动画效果纵享丝滑。
Stars: ✭ 314 (-14.44%)
Mutual labels: loading
Rsup Progress
❤️ A simple progress bar with promises support
Stars: ✭ 290 (-20.98%)
Mutual labels: loading
React Loadable
⏳ A higher order component for loading components with promises.
Stars: ✭ 16,238 (+4324.52%)
Mutual labels: loading
react-top-loading-bar
Install
- using npm
npm install --save react-top-loading-bar
- using yarn
yarn add react-top-loading-bar
- CDN
https://unpkg.com/react-top-loading-bar
Usage
With ref
import React, { useRef } from 'react'
import LoadingBar from 'react-top-loading-bar'
const App = () => {
const ref = useRef(null)
return (
<div>
<LoadingBar color='#f11946' ref={ref} />
<button onClick={() => ref.current.continuousStart()}>
Start Continuous Loading Bar
</button>
<button onClick={() => ref.current.staticStart()}>
Start Static Loading Bar
</button>
<button onClick={() => ref.current.complete()}>Complete</button>
<br />
</div>
)
}
export default App
With state
import React, { useState } from 'react'
import LoadingBar from 'react-top-loading-bar'
const App = () => {
const [progress, setProgress] = useState(0)
return (
<div>
<LoadingBar
color='#f11946'
progress={progress}
onLoaderFinished={() => setProgress(0)}
/>
<button onClick={() => setProgress(progress + 10)}>Add 10%</button>
<button onClick={() => setProgress(progress + 20)}>Add 20%</button>
<button onClick={() => setProgress(100)}>Complete</button>
<br />
</div>
)
}
export default App
Demo
Built-in Methods
Methods | Parameters | Descriptions |
---|---|---|
add(value) | Number | Adds a value to the loading indicator. |
decrease(value) | Number | Decreases a value to the loading indicator. |
continuousStart(startingValue, refreshRate) | Number (optional), Number(optional) | Starts the loading indicator with a random starting value between 20-30, then repetitively after an refreshRate, increases it by a random value between 2-10. This continues until it reaches 90% of the indicator's width. |
staticStart(startingValue) | Number (optional) | Starts the loading indicator with a random starting value between 30-50. |
complete() | Makes the loading indicator reach 100% of his width and then fade. |
Properties
Property | Type | Default | Description |
---|---|---|---|
progress | Number | 0 |
The progress/width indicator, progress prop varies from 0 to 100 . |
color | String | red |
The color of the loading bar, color take values like css property background: do, for example red , #000 rgb(255,0,0) etc. |
shadow | Boolean | true |
Enables / Disables shadow underneath the loader. |
height | Number | 2 |
The height of the loading bar in pixels. |
background | String | 3 |
The loader parent background color. |
transitionTime | Number | 300 |
Fade transition time in miliseconds. |
loaderSpeed | Number | 500 |
Loader transition speed in miliseconds. |
waitingTime | Number | 1000 |
The delay we wait when bar reaches 100% before we proceed fading the loader out. |
className | String | You can provide a class you'd like to add to the loading bar to add some styles to it | |
onLoaderFinished | Function | This is called when the loading bar completes, reaches 100% of his width. |
Projects using react-top-loading-bar
Add your own project. Make a PR
Migrate from V.1
- Replace onRef prop with 'ref', assign it to a react ref. Access methods with reactRef.current.xxx
Code Style
License
MIT © Klendi Gocci | klendi.dev
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].