https://github.com/startpolymer/s-circle-progress
Polymer-based web component displaying a circular progress bar.
https://github.com/startpolymer/s-circle-progress
Last synced: about 1 year ago
JSON representation
Polymer-based web component displaying a circular progress bar.
- Host: GitHub
- URL: https://github.com/startpolymer/s-circle-progress
- Owner: StartPolymer
- Created: 2016-12-13T10:55:07.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-01-15T21:23:02.000Z (over 5 years ago)
- Last Synced: 2025-04-11T18:24:26.007Z (about 1 year ago)
- Language: HTML
- Homepage:
- Size: 8.79 KB
- Stars: 11
- Watchers: 1
- Forks: 13
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Published on webcomponents.org][webcomponents-image]][webcomponents-url]
# \
Polymer-based web component displaying a circular progress bar.
Inspired by element [\](https://github.com/tehapo/progress-bubble).
## Demo
[Full demo][webcomponents-demo]
## Usage
```html
60%
30s
```
### 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](https://www.npmjs.com/package/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](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
## License
MIT: [StartPolymer/license](https://github.com/StartPolymer/license)
[webcomponents-image]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
[webcomponents-url]: https://beta.webcomponents.org/element/StartPolymer/s-circle-progress
[webcomponents-demo]: https://beta.webcomponents.org/element/StartPolymer/s-circle-progress/demo/demo/index.html