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
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
Simple form progress bar. Inspiration from dribbble.
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;
Pure CSS Progress, a pretty liquid progress-bar. I've coded Pure CSS Navigation triggers too, if you want the bar's code just follow the css comments :)
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.