wired-progress
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.
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).
Links
Compatibility
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