0.5.3 • Published 6 years ago
@aspen-elements/s-circle-progress v0.5.3
\<s-circle-progress>
Polymer-based web component displaying a circular progress bar.
Inspired by element \<progress-bubble>.
Demo
Usage
<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>Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
--s-circle-progress-bg-stroke-color | The background color of the circle | --paper-grey-100 |
--s-circle-progress-stroke-color | The stroke color of the circle | --accent-color |
--s-circle-progress-stroke-linecap | The stroke-linecap svg attribute of the circle | round |
Installation
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 serveBuilding Your Application
$ polymer buildThis 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/bundledRunning Tests
$ polymer testYour application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.
License
MIT: StartPolymer/license