candy-progress | Vaadin

Polymer element that creates candy progress bar

[ This description is mirrored from at on 2019-05-10 ]

candy-progress Bower version Travis state Published on

Published on Vaadin  Directory Stars on

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.


bower install candy-progress --save


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)


<style is="custom-style">
    candy-progress {
        --candy-progress-width: 100%;
        --candy-progress-height: 20px;
    } {
        --candy-progress-color: #AC0000;
        --candy-progress-secondary-color: #FF0000;
    } {
        --candy-progress-color: #006500;
        --candy-progress-secondary-color: #1FD01F;
    } {
        --candy-progress-color: #F48300;
        --candy-progress-secondary-color: #FF8826;
    } {
        --candy-progress-color: blue;
        --candy-progress-secondary-color: white;
<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>


Link to this version
ImportedReleased 12 July 2017Apache License 2.0
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (1.0.0)
Browser Compatibility
Install with
bower install --save Collaborne/candy-progress"#2.1.2"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.1.2


  • polymer#Polymer/polymer#^2.0.0