candy-progress
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>