wired-progress | Vaadin

A progress indicator control with a hand-drawn wireframe look.

[ This description is mirrored from README.md at github.com/wiredjs/wired-progress on 2019-05-10 ]

wired progress


Hand-drawn sketchy progress bar web component.

For demo and view the complete set of wired-elememts: wiredjs.com

Learn about web components here.


Add wired-progress to your project:

npm i wired-progress

Import wired-progress definition into your HTML page:

<script type="module" src="wired-progress/wired-progress.js"></script>

Or into your module script:

import { WiredProgress } from "wired-progress"

Use it in your web page:

<wired-progress value="25"></wired-progress>
<wired-progress value="10" min="5" max="15"></wired-progress>


value - Numeric value of the progress.

min - Minimum value. Default is 0.

max - Maximum value. Default is 100.

percentage - Boolean indicating if the label should show a % symbol.

Custom CSS Variables

--wired-progress-label-color Color of the label.

--wired-progress-font-size Font size of the label.

--wired-progress-color Color of the progress bar. Default is rgba(0, 0, 200, 0.1).


Link to this version
ImportedReleased 27 August 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save wiredjs/wired-progress"#0.1.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.0


  • polymer#Polymer/polymer#^2.0.0
  • wired-lib#^0.1.1