Directory

← Back

wired-progress

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

Author

Rating

Popularity

<100

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

wired progress

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.

Usage

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>

Properties

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).

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • wired-lib#^0.1.1
Released
2017-08-27
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

wired-progress - Vaadin Add-on Directory

A progress indicator control with a hand-drawn wireframe look. wired-progress - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/wiredjs/wired-progress](https://github.com//wiredjs/wired-progress/blob/v0.5.0/README.md) on 2019-05-10 ]** ![wired progress](https://wiredjs.github.io/wired-elements/images/progress.png) # wired-progress Hand-drawn sketchy progress bar web component. For demo and view the complete set of wired-elememts: [wiredjs.com](http://wiredjs.com/) Learn about web components [here](https://www.webcomponents.org/introduction). ## Usage Add wired-progress to your project: ``` npm i wired-progress ``` Import wired-progress definition into your HTML page: ```html ``` Or into your module script: ```javascript import { WiredProgress } from "wired-progress" ``` Use it in your web page: ```html ``` ### Properties **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)*.
Online