Polymer-based web component displaying a circular progress bar.
Inspired by element <progress-bubble>.
<s-circle-progress value="6" max="10"> 60% </s-circle-progress> <s-circle-progress value="30" angle="90" stroke-width="8"> <b>30s</b> </s-circle-progress>
The following custom properties and mixins are available for styling:
||The background color of the circle||
||The stroke color of the circle||
||The stroke-linecap svg attribute of the circle||
bower i s-circle-progress -S
Install the Polymer-CLI
First, make sure you have the Polymer CLI installed. Then run
polymer serve to serve your application locally.
Viewing Your Application
$ polymer serve
Building Your Application
$ polymer build
This will create a
build/ folder with
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
$ 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.