SVG Arc of circle depends of percent value
circle-percent
circle-percent 
Lit-Element web component configurable to show a circle percent and title.
Demo
<h3>Basic circle-percent demo default</h3>
<circle-percent></circle-percent>
<h3>Circle-percent demo 2</h3>
<circle-percent percent="70" radio="200" title="circle percent 70% radio=200px"></circle-percent>
<h3>Circle-percent demo 3</h3>
<circle-percent percent="60" swidth="10" scolor="#F93" title="circle percent 60% radio=200px color=#F93"></circle-percent>
<h3>Basic circle-percent demo default</h3>
<circle-percent></circle-percent>
<h3>Circle-percent demo 2</h3>
<circle-percent percent="70" radio="200" title="circle percent 70% radio=200px"></circle-percent>
<h3>Circle-percent demo 3</h3>
<circle-percent percent="60" swidth="10" scolor="#F93" title="circle percent 60% radio=200px color=#F93"></circle-percent>
CSS Variables
--inf-font-size --inf-font-family
Install the Polymer-CLI
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install
to install your element's dependencies, then run polymer serve
to serve your element locally.
Viewing Your Element
$ polymer serve
Running Tests
$ polymer test
Build
$ npm run build
Your application is already set up to be tested via web-component-tester. Run polymer test
to run your application's test suite locally.
Author
- Mánu Fosela - Javascript Composer - manufosela
License
This project is licensed under Apaceh 2.0 License - see the LICENSE file for details
Install
Framework Support
Polymer 3.0+
Browser Independent
Install with
Run the above npm command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 2.0.2
Dependencies
- @polymer/lit-element#^0.6.1
- @polymer/polymer#^3.0.0