Progress Bars
Simple CSS progress bars. View the demo.
Getting Started
Compiled and production-ready code can be found in the dist
directory. The src
directory contains development code.
1. Include Progress Bars on your site.
<link rel="stylesheet" href="css/progress-bars.css">
2. Add the markup to your HTML.
Use percentages to set the widths of each bar. Add optional .progress-bar-secondary
, .progress-bar-success
, .progress-bar-danger
, or .progress-bar-warning
classes for additional colors, and to convey meaning.
<div class="progress">
<div class="progress-bar" style="width: 90%;">
Basic
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-secondary" style="width: 30%;"></div>
Secondary
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 80%;">
Success
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 60%;">
Danger
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 70%;">
Warning
</div>
</div>
And that's it, you're done. Nice work!
Installing with Package Managers
You can install Progress Bars with your favorite package manager.
- NPM:
npm install cferdinandi/progress-bars
- Bower:
bower install https://github.com/cferdinandi/progress-bars.git
- Component:
component install cferdinandi/progress-bars
Working with the Source Files
If you would prefer, you can work with the development code in the src
directory using the included Gulp build system. This compiles, lints, and minifies code, and runs unit tests. It's the same build system that's used by Kraken, so it includes some unnecessary tasks and Sass variables but can be dropped right in to the boilerplate without any configuration.
Dependencies
Make sure these are installed first.
Quick Start
- In bash/terminal/command line,
cd
into your project directory. - Run
npm install
to install required files. - When it's done installing, run one of the task runners to get going:
gulp
manually compiles files.gulp watch
automatically compiles files when changes are made and applies changes using LiveReload.
Browser Compatibility
Progress Bars works in all modern browsers, and IE 6 and above.
How to Contribute
In lieu of a formal style guide, take care to maintain the existing coding style. Please apply fixes to both the development and production code. Don't forget to update the version number, and when applicable, the documentation.
License
The code is available under the MIT License.