This progress bar uses the HTML5 custom data-* attribute to allow for quick updating to a progress bar animated by Zepto (or jQuery). The animation is wrapped in a window.resize function to reanimate if the browser size is changed.
Flat radial progress bar (pie)
Simple form progress bar. Inspiration from dribbble.
Built with SASS and background stripped images
Radial progress bar using CSS only. This progress bar I had to implement for one of my projects and codepen happened to be my playground.
Create a modal progress bar with Twitter Bootstrap 3. Getting the animation to work properly is a bit of a challenge. A few quirks in RC1 require some special CSS to work-around
A quick way to sketch out musical chord progressions.
uses my Scale Generator and Arpeggio Pattern Generator and the lovely Tone.js.
Progress bar with changeable skins showing page load percentage
Using a progress element for a profile completion bar. Added click states to see desired behavior; in the wild the user would click a "save" or "next" button which would animate the progress bar accordingly.
Custom progress element with numbers.
Unfortunately WebKit only because it uses:
- background-clip: text;
Click the current task checkbox to progress. Design based on UI practice by Muhammad Farhan - http://dribbble.com/shots/1181186-UI-practice-GIF. Shout-out to Kurt Hanson's Progress Bar (Pie) for the code behind the circular progress highlighting
Show the progress bar when loading.
Need to know how to enable it? Go here.