HTML5 circular progress indicator
Atomic is a HTML5 circular progress bar. It functions with minimal use of DOM elements, CSS and JS. Atomic will be used by the getting started pages of Nodejitsu and observe.it.
To include atomic.js in your project, include it in your browserify build. For standalone usage gulp builds are available to create minified and obfuscated output.
npm run-script compile # create minified and smallest assets
npm run-script compile-dev # to compile dev dependencies with sourcemaps included
Atomic works by combining CSS sibling power with the animation capacties of the
HTML5 canvas
element. To use Atomic include the html below and make sure to
add the CSS and JS assets. The example below will generate a progress bar with 5
steps. Removing or adding list items will adjust the progress bar accordingly.
I recommend to use the Montserrat font of Google Webfonts, as the styling is optimized for it and it just looks more pretty. See the demo page for the actual inclusion.
The label text is displayed on hover
and replaces the number of the step. This
could be used to display a title for instance.
<section class="atomic">
<input type="text" value="54" size="3" maxlength="3">
<ol>
<li><label>Step 1</label></li>
<li><label>More descriptive</label></li>
<li><label>labels are fun</label></li>
<li><label>Nice steps</label></li>
<li><label>Almost there</label></li>
<li><label>The end</label></li>
</ol>
<canvas></canvas>
</section>
The required CSS and JS assets are small.
Changing the value of the input will animate the progress inidicator and select the proper step alongside. A demonstration can be found on the demo page.
Latest chrome, safari, firefox and IE9+
TODO