Skip to content

Latest commit

 

History

History
70 lines (51 loc) · 2.23 KB

README.md

File metadata and controls

70 lines (51 loc) · 2.23 KB
Raw

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