jQuery Stylish and Simple Progress Bar Plugin ProBars
Add-ons
Plugin Description: ProBars is a stylish progress bar plugin that provides multiple loading effects with good compatibility. Some effects may be unavailable in older browsers.
Usage
Add 'pro-bars.min.css', 'pro-bars.min.js', and 'visible.min.js' to your document. Using ProBars requires simple HTML markup and several specific class names. If no color class is provided, it uses a default gray color scheme. It uses a flat color scheme for the progress bar style. Two data attributes must be specified: data-pro-bar-percent for the percentage value and data-pro-bar-delay for the animation delay. Since it relies on jQuery animations, the bar length animates from 0 to 'x'.
1 2 3 4 5 | <div class="pro-bar-container color-nephriti"> <div class="pro-bar bar-50 color-emerald" data-pro-bar-percent="50" data-pro-bar-delay="100"> <div class="pro-bar-candy"></div> </div></div> |
By default, candy stripes are static. To animate the stripes from left to right or right to left, apply the candy-ltr or candy-rtl class to the pro-bar-candy element. Remove the pro-bar-candy element to display a plain progress bar.
评论