Progress-Circle is a custom web component that wraps a progress bar around an Icon of your choosing.
When you click on this HTML element it will display a modal that you can customize. Click on it again
and the modal will disppear. There is an image of it below.
It is quite easy to use it on your webpage. Just follow the below steps:
1. Include the icon link in your header. For example if you are using Font Awesome 4 it would be
``
`
2. Include the link to the script file that holds the this custom web component (progress-circle.js) near the bottom of
the body section of your webpage. See below
`
`
3) Then use the custom element tags on your webpage.
` Test
`
That is all you have to do to use this custom element. There is an example HTML page (progress-circle.html) that shows how to use it.
`
Progress Circle
This is a test of the progress-circle component
Description of the Modal
``
$3
1. total - Is the total number of section for the progressbar. The max number
2. current - Is the current status of the progressbar thus if it's set to 4 and total to 10 then the progress bar would be 40% filled
3. badgetext - Is the text that will appear in the badge. The bottom circle.
4. bgcolor - Will be the background color of the progress-circle element and the modal that will appear if you click on it
5. progresscolor - Will be the color of the progressbar and the badge
6. icontype - the class name of the icon you want to appear on this element. Note must link in the icon like I did above
7. modaltitle - Will be the title of the modal that will appear if you click on the element. IF you click on the element when
the modal is visible it will make it disappear.
8. The HTML that is between the this element tag will be the body of the modal.
Note: That each of these attributes have defaults values but you should at less set icontype, total, current, Modal Title, and Modal Body