- By James Scariati
- May 2015
Add a subtle "barbershop pole" stripe animation to progress bars. Gracefully degrades in older browsers that don't support CSS3 animation and/or linear gradients (the stripes will appear without movement, or not appear at all).
Include jQuery, Velocity, the jquery.progressBar.min.js plugin, and jquery.progressBar.css in your HTML:
<head>
<link rel="stylesheet" href="css/jquery.progressBar.css" />
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery.progressBar.min.js"></script>
<script src="lib/velocity.min.js"></script>
</head>Next, add an element to your HTML with the following structure:
<div class="progress" data-step="1" data-total="5"></div>The data-step and data-total attributes are used to determine how much to fill the progress bar. In this example, 1 / 5 = 0.2, so the progress bar will fill to 20%.
Then call the plugin on your element:
$(".progress").progressBar();The following options are available:
$(".progress").progressBar({
animateFill: true,
animateStriping: true,
fillColor: "#ccc",
fillGradient: true,
showPercentage: true,
showStriping: true,
trackColor: "#a2a4a6",
width: "100%"
});animateFill: animates the progress bar's fill from zero. Defaults totrueanimateStriping: animates the striping on the progress bar. Defaults totruefillColor: sets the color of the progress bar's fill. Accepts any valid CSS color (hexcode, color keyword, etc.). Defaults to#cccfillGradient: adds a gradient effect to the progress bar's fill. Defaults totrueshowPercentage: displays text above the progress bar showing the value it's filled to. Defaults totrueshowStriping: overlays a striping effect on the progress bar's fill. If this isfalse,animateStripinghas no effect. Defaults totruetrackColor: sets the color of the track that the progress bar fills. Defaults to#a2a4a6width: width of the progress bar. Defaults to100%