rebel-progress-bar v0.0.1

Rebel Progress Bar

A simple vanilla web component to provide an easy to style and use progress bar.

Polyfills

To get this web component working in all major browser make sure you include the skatejs-web-components.js polyfill before including this web component.

Usage

There are two ways you can make use of this web component. You can use it as part of a bigger ES2015 project as ES2015 source, or you can include a compiled ES5 version.

ES5

You can simple included the compiled version into your project and make use of the custom element rbl-repeater.

    <script src="dist/rebel-progress-bar.js"></script>
    <rebel-progress-bar percent="90"></rebel-progress-bar>

ES2015

For ES2015 projects you can install this component directly into your project using npm.

npm install rebel-progress-bar

Then you can include it into your ES2015 project as you would any other module:

import * as RebelProgressBar from 'node_modules/rebel-progress-bar/src/rebel-progress-bar';

Note: rebel-progress-bar.js doesn't actually export anything but an import is required to have the custom element registered on the document.

API

This component is currently very simple and has only a percent attribute which is used to set the current percentage.

Attributes

Example

You can find a working example by running index.html in a modern web browser or take a look at the code below:

<rebel-progress-bar percent="90"></rebel-progress-bar>

Contributing

Please submit any suggestions or changes via a pull request.