Polymer-based web component displaying a circular progress bar.
Inspired by element <s-circle-progress>.
<circle-progress value="6" max="10">
60%
</circle-progress>
<circle-progress value="30" angle="90" stroke-width="8">
<b>30s</b>
</circle-progress>
The following custom properties and mixins are available for styling:
Custom property | Description | Default |
---|---|---|
--circle-progress-bg-stroke-color |
The background color of the circle | --paper-grey-100 |
--circle-progress-stroke-color |
The stroke color of the circle | --accent-color |
--circle-progress-stroke-linecap |
The stroke-linecap svg attribute of the circle | round |
--circle-progress-width |
The width of the circle | 64px |
--circle-progress-height |
The height of the circle | 64px |
bower i circle-progress -S
First, make sure you have the Polymer CLI installed. Then run polymer serve
to serve your application locally.
$ polymer serve
$ polymer build
This will create a build/
folder with bundled/
and unbundled/
sub-folders
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
CSS, and JS optimizers.
You can serve the built versions by giving polymer serve
a folder to serve
from:
$ polymer serve build/bundled
$ polymer test
Your application is already set up to be tested via web-component-tester. Run polymer test
to run your application's test suite locally.
MIT: Shah-Parth/license