
Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
react-progress-ui
Advanced tools
Simplistic progress components for your React applications
Simple Progress Components for your React Applications. The current provided components are:
Install from npm:
npm install --save react-progress-ui
Using the ProgressBar is easy. It consists of only two divs. An outside div that you can think of as the "container", and an inside div that fills a certain percentage width of the container.
Please read all of the documentation related to the progress bar before using.
import { ProgressBar } from 'react-progress-ui'
<ProgressBar
percentageDone={70}
/>
The container and filler have some default styling built in, just so you can see something on the screen when you add it to your project. These are the default styles:
const defaultContainerStyles = {
height: '10px',
width: '300px',
borderRadius: '20px',
border: '1px solid #333'
};
const defaultFillerStyles = {
height: '100%',
background: '#1DA598',
width: '20%',
borderRadius: 'inherit'
};
Props API:
DottedProgress is a horizontal timeline styling progress indicator.
import { DottedProgress } from 'react-progress-ui'
<DottedProgress
numSteps={5}
/>
The horizontal line and dots have some default styling built in, just so you can see something on the screen when you add it to your project. These are the default styles:
const defaultLineStyles = {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '500px',
height: '2px',
background: '#dde4e9',
borderRadius: '8px'
};
const defaultDotStyles = {
width: '12px',
height: '12px',
borderRadius: '50%',
border: '1px solid #dde4e9',
background: 'white'
};
Props API:
You can also use a spinner.
import { Spinner } from 'react-progress-ui'
<Spinner />
The spinner is an SVG image element. If you want to adjust its size, just set a height prop with the number of your choosing. No need to worry about setting the width, as the width should automatically scale with the height.
<Spinner height={45} />
FAQs
Simplistic progress components for your React applications
We found that react-progress-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.