brick-progressbar

brick-progressbar

A Brick custom element. BootStrap Progressbar

Demo

Check it live!

Usage

1. Import Web Components polyfill:

   <script src="bower_components/platform/platform.js"></script>

2. Import Custom Element:

   <link rel="import" href="src/brick-progressbar.html">

3. Start using it:

   <brick-progressbar min="200" max="500" value="340" showStatus striped active>
   </brick-progressbar>

Options

Attribute	Options	Default	Description
min	string	0	Minimum value of Progressbar.
max	string	100	Maximum value of Progressbar.
value	string	0	Get/Set Value of Progressbar.
type	string	default	Possible values are success, info, danger, and warning.
striped	boolean	false	Uses a gradient to create a striped effect. Not available in IE8.
active	boolean	false	Show animation on striped. Not available in IE8.
showStatus	boolean	false	Show status like (e.g., 32% or 350/500).
showActualValue	boolean	false	Show status in Percentage (e.g., 32%) if present, else show status in text (e.g., 350/500).
intermediate	boolean	false	Show Intermediate Progressbar.

Development

Brick components use Stylus to generate their CSS.

This repository comes outfitted with a set of tools to ease the development process.

To get started:

• Install Bower & Gulp:

  $ npm install -g bower gulp

• Install local dependencies:

  $ npm install && bower install

While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.

To run the development server:

• Run gulp server
• Navigate to http://localhost:3001

To simply build and lint your code, run gulp build.

You can also push your code to GitHub Pages by running gulp deploy.