tanem / React Nprogress
Licence: mit
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Labels
Projects that are alternatives of or similar to React Nprogress
Alive Progress
A new kind of Progress Bar, with real-time throughput, ETA, and very cool animations!
Stars: ✭ 2,940 (+1599.42%)
Mutual labels: progress, progress-bar, spinner, progressbar
Vue Step Progress
A simple Vue component that displays a Progress Bar with labels for each step
Stars: ✭ 26 (-84.97%)
Mutual labels: component, progress, progress-bar, progressbar
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-26.59%)
Mutual labels: component, loading, progress, spinner
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+980.35%)
Mutual labels: loading, progress, progress-bar, spinner
Flagged
Feature Flags for React made easy with hooks, HOC and Render Props
Stars: ✭ 97 (-43.93%)
Mutual labels: hooks, higher-order-component, hoc, render-props
React Circle
Renders a svg circle + progress, it just works 💘
Stars: ✭ 925 (+434.68%)
Mutual labels: loading, progress, spinner
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+347.4%)
Mutual labels: loading, progress, spinner
Awloader
AWLoader is a UI Component that allows you to integrate loader that fits your needs within your app.
Stars: ✭ 11 (-93.64%)
Mutual labels: component, loading, progress
Next Nprogress
Next.js HOC to integrate NProgress inside your app
Stars: ✭ 145 (-16.18%)
Mutual labels: higher-order-component, hoc, progress-bar
Formik
Build forms in React, without the tears 😭
Stars: ✭ 29,047 (+16690.17%)
Mutual labels: hooks, higher-order-component, render-props
Android Spinkit
Android loading animations
Stars: ✭ 8,096 (+4579.77%)
Mutual labels: loading, progress-bar, spinner
Use Url State
Lift a React component's state into the url
Stars: ✭ 154 (-10.98%)
Mutual labels: hooks, higher-order-component, render-props
Roundprogresstextview
TextView with Round Pogress
Stars: ✭ 18 (-89.6%)
Mutual labels: progress, progress-bar, progressbar
Ngx Progressbar
Angular progress bar ☄
Stars: ✭ 813 (+369.94%)
Mutual labels: loading, progress, progressbar
React Native Loading Spinner Overlay
💈 React Native loading spinner overlay
Stars: ✭ 1,369 (+691.33%)
Mutual labels: loading, progress-bar, spinner
Delayedprogress
ProgressDialog that waits a minimum time to be dismissed before showing. Once visible, the ProgressDialog will be visible for a minimum amount of time to avoid "flashes" in the UI.
Stars: ✭ 95 (-45.09%)
Mutual labels: progress, progress-bar, progressbar
Terminal layout
The project help you to quickly build layouts in terminal,cross-platform(一个跨平台的命令行ui布局工具)
Stars: ✭ 98 (-43.35%)
Mutual labels: loading, progress, progress-bar
Ruby Progressbar
Ruby/ProgressBar is a text progress bar library for Ruby.
Stars: ✭ 1,378 (+696.53%)
Mutual labels: progress, progress-bar, progressbar
Multiprogressview
📊 An animatable view that depicts multiple progresses over time. Modeled after UIProgressView
Stars: ✭ 614 (+254.91%)
Mutual labels: progress, progress-bar, progressbar
Python Progressbar
Progressbar 2 - A progress bar for Python 2 and Python 3 - "pip install progressbar2"
Stars: ✭ 682 (+294.22%)
Mutual labels: progress, progress-bar, progressbar
react-nprogress
A React primitive for building slim progress bars.
Background | Usage | Live Examples | API | Installation | License
Background
This is a React port of rstacruz's nprogress
module. It exposes an API that encapsulates the logic of nprogress
and renders nothing, giving you complete control over rendering.
Usage
In the following examples, Container
, Bar
and Spinner
are custom components.
Hook
import { useNProgress } from '@tanem/react-nprogress'
import React from 'react'
import { render } from 'react-dom'
import Bar from './Bar'
import Container from './Container'
import Spinner from './Spinner'
const Progress = ({ isAnimating }) => {
const { animationDuration, isFinished, progress } = useNProgress({
isAnimating,
})
return (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)
}
render(<Progress isAnimating />, document.getElementById('root'))
Render Props
import { NProgress } from '@tanem/react-nprogress'
import React from 'react'
import { render } from 'react-dom'
import Bar from './Bar'
import Container from './Container'
import Spinner from './Spinner'
render(
<NProgress isAnimating>
{({ animationDuration, isFinished, progress }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)}
</NProgress>,
document.getElementById('root')
)
HOC
import { withNProgress } from '@tanem/react-nprogress'
import React from 'react'
import { render } from 'react-dom'
import Bar from './Bar'
import Container from './Container'
import Spinner from './Spinner'
const Inner = ({ animationDuration, isFinished, progress }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)
const Enhanced = withNProgress(Inner)
render(<Enhanced isAnimating />, document.getElementById('root'))
Live Examples
- HOC: Source | Sandbox
- Material UI: Source | Sandbox
- Next Router: Source | Sandbox
- Original Design: Source | Sandbox
- Reach Router: Source | Sandbox
- React Router: Source | Sandbox
- Render Props: Source | Sandbox
- UMD Build (Development): Source | Sandbox
- UMD Build (Production): Source | Sandbox
API
Props
-
animationDuration
- Optional Number indicating the animation duration inms
. Defaults to200
. -
incrementDuration
- Optional Number indicating the length of time between progress bar increments inms
. Defaults to800
. -
isAnimating
- Optional Boolean indicating if the progress bar is animating. Defaults tofalse
. -
minimum
- Optional Number between0
and1
indicating the minimum value of the progress bar. Defaults to0.08
.
Hook Example
const Progress = ({
animationDuration,
incrementDuration,
isAnimating,
minimum
}) => {
const { isFinished, progress } = useNProgress({
animationDuration,
incrementDuration,
isAnimating,
minimum
})
return (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)
}
<Progress
animationDuration={300}
incrementDuration={500}
isAnimating
minimum={0.1}
/>
Render Props Example
<NProgress
animationDuration={300}
incrementDuration={500}
isAnimating
minimum={0.1}
>
{({ animationDuration, isFinished, progress }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)}
</NProgress>
HOC Example
const Inner = ({ animationDuration, isFinished, progress }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)
const Enhanced = withNProgress(Inner)
<Enhanced
animationDuration={300}
incrementDuration={500}
isAnimating
minimum={0.1}
/>
Installation
$ npm install @tanem/react-nprogress
There are also UMD builds available via unpkg:
- https://unpkg.com/@tanem/react-nprogress/dist/react-nprogress.umd.development.js
- https://unpkg.com/@tanem/react-nprogress/dist/react-nprogress.umd.production.js
For the non-minified development version, make sure you have already included:
For the minified production version, make sure you have already included:
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].