0.5.3 • Published 5 years ago

@aspen-elements/s-circle-progress v0.5.3

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

Published on webcomponents.org

\<s-circle-progress>

Polymer-based web component displaying a circular progress bar.

Inspired by element \<progress-bubble>.

Demo

Full 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 propertyDescriptionDefault
--s-circle-progress-bg-stroke-colorThe background color of the circle--paper-grey-100
--s-circle-progress-stroke-colorThe stroke color of the circle--accent-color
--s-circle-progress-stroke-linecapThe stroke-linecap svg attribute of the circleround

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 serve

Building Your Application

$ 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

Running Tests

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

License

MIT: StartPolymer/license