https://github.com/collaborne/candy-progress

Polymer element that creates candy progress bar
https://github.com/collaborne/candy-progress

Last synced: about 2 months ago
JSON representation

Polymer element that creates candy progress bar

• Host: GitHub
• URL: https://github.com/collaborne/candy-progress
• Owner: Collaborne
• License: apache-2.0
• Created: 2017-01-30T21:47:38.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-04-15T10:33:46.000Z (about 6 years ago)
• Last Synced: 2025-03-15T15:07:54.757Z (3 months ago)
• Language: TypeScript
• Homepage: https://www.webcomponents.org/element/Collaborne/candy-progress
• Size: 2.49 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# candy-progress  [![Bower version](https://badge.fury.io/bo/candy-progress.svg)](http://badge.fury.io/bo/candy-progress) [![Travis state](https://travis-ci.org/Collaborne/candy-progress.svg?branch=master)](https://travis-ci.org/Collaborne/candy-progress) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Collaborne/candy-progress)  

[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/Collabornegoogle-analytics-tracker-behavior)

[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/Collabornegoogle-analytics-tracker-behavior.svg)](https://vaadin.com/directory/component/Collabornegoogle-analytics-tracker-behavior)

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

```html

    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;

    }

```