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)
Built with SASS and background stripped images
Simple form progress bar. Inspiration from dribbble.
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
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.
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
In this demo, we will use HTML5 progress element to display skillset. We will try and make this as cross-browser as possible with decent fallback tachniques for browsers that do not support them.
Need to know how to enable it? Go here.