candy-progress
![Published on webcomponents.org](https://camo.githubusercontent.com/fa095f7c7b24972f3525b39a6f31c15626f3a4cc019314b4f19ad88ccfd47ddb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f776562636f6d706f6e656e74732e6f72672d7075626c69736865642d626c75652e737667)
Polymer element that creates candy progress bar.
This element is a native Polymer 2 element (ES6 class syntax). Use version 2.0.x for Polymer 2 hybrid mode.
Install
bower install candy-progress --save
Usage
Supported options:
Option | Description |
---|---|
progress | Value that sets the bar fill explicitly, the value is in percentage (The range should be 0-100) |
loop | If set to true the bar is going to fill repetitively. |
fill | If set to true the bar is going to fill and stay filled. |
speed | Number represents the speed of bar filling (fitting values are 1 - 100, 1 the slowest and 100 the fastest) |
Example
<style is="custom-style">
candy-progress {
--candy-progress-width: 100%;
--candy-progress-height: 20px;
}
candy-progress.red {
--candy-progress-color: #AC0000;
--candy-progress-secondary-color: #FF0000;
}
candy-progress.green {
--candy-progress-color: #006500;
--candy-progress-secondary-color: #1FD01F;
}
candy-progress.orange {
--candy-progress-color: #F48300;
--candy-progress-secondary-color: #FF8826;
}
candy-progress.blue {
--candy-progress-color: blue;
--candy-progress-secondary-color: white;
}
</style>
<candy-progress class="red" speed="35" fill></candy-progress>
<candy-progress class="green" speed="70" loop></candy-progress>
<candy-progress class="orange" loop></candy-progress>
<candy-progress class="blue" progress="50"></candy-progress>