progresso
v0.3.2
Published
A progress bar component
Downloads
3
Maintainers
Readme
Dev setup
npm run lint
- runs ESLint.npm test
andnpm run tdd
- runs Karma/Mocha/Chai/Phantom. Code coverage report is generated through istanbul/isparta tobuild/
.npm start
- runs the development server at localhost:8080 and use Hot Module Replacement. You can override the default host and port through env (HOST
,PORT
).npm version <x.y.<>
- updates /dist and package.json with the new version and create a version tag to Git.npm publish
- pushes a new version to npm and updates the project site.
What else could be added?
- A good UX when changing either
min
andmax
. I don't believe I've seen this done well before but here are a few quick ideas:- Moving the progress back to the left is probably not ever a good option
- Make the filled bar thinner to signify that it's got more distance to travel. Kind of weird.
- Temporarily show some labels on an x-axis. Imagine updating
max
and then suddenly the axis labels appear and then it updates the right-side to thenew max
value while the left side changes to a new amount so that the right most position of the filled amount stays the same
- A new prop to convey
error
/warning
/success
states which could add new css classname hooks and be available for thelabel
- A better default
label
. This one just makes it easy to explain that you can pass a function that has access to the inner state of the component. - Different positioning of the label.
- Right aligned inside the the progress bar and then left aligned to outside of it when there isn't enough progress to contain it. Stuff like that.
- Better CSS customization
- At the very least, explain the current BEM style class name hooks for easy theming
- Research latest CSS/"JS-in-CSS" best practices. PostCSS, CSS Modules, etc?
- This project could handle different other styles of progress indicators without changing much of the API. Like radial indicators, for example.
Usage
With default props (they're not needed here):
<ProgressBar
animated={true}
classNamespace="progressbar"
max={100}
min={0}
label={/* "defaultLabel" function export from same file */}
value={0}
/>
Custom label and "alternate" css styles that are also available in the source code. Hint: The css is currently the best reference adding your own custom styling
<ProgressBar
classNamespace="progressbar-alt"
label={(percent, max, value, indeterminate) => ( indeterminate ?
'Figuring out how to load your stuff' :
`${percent}% of your stuff has loaded`
)}
/>