Skip to content

Polymer-based web component displaying a circular progress bar.

Notifications You must be signed in to change notification settings

StartPolymer/s-circle-progress

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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