Skip to content
HTML5 circular progress indicator
JavaScript CSS
Latest commit 8b645af Jul 28, 2014 @Swaagie [dist] remove unused dep
Failed to load latest commit information.
css
demo [major] include browserify, drop square use gulp, small changes to init Jul 28, 2014
.gitignore [major] include browserify, drop square use gulp, small changes to init Jul 28, 2014
CHANGELOG.md
README.md
gulpfile.js
index.js
package.json

README.md

Atomic.js

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.

Installation

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

How to use

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.

Atomic

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.

  • atomic.min.js compressed: 2.5kB minified, 1.1kB gzipped
  • atomic.min.css compressed: 6.1kB minified, 1.1kB gzipped.

Live Demo

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.

Browser support

Latest chrome, safari, firefox and IE9+

Tests

TODO

Something went wrong with that request. Please try again.