https://github.com/mmgrant73/progress-circle

A custom web component; A progressbar wrap around an icon. When this html element is click a custom modal will appear
https://github.com/mmgrant73/progress-circle

component css css3 html html-element html5 javascript progress-circle progressbar web

Last synced: 5 days ago
JSON representation

A custom web component; A progressbar wrap around an icon. When this html element is click a custom modal will appear

• Host: GitHub
• URL: https://github.com/mmgrant73/progress-circle
• Owner: mmgrant73
• License: mit
• Created: 2019-12-24T04:59:27.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-02-12T21:23:38.000Z (almost 3 years ago)
• Last Synced: 2024-10-11T22:23:14.599Z (about 1 month ago)
• Topics: component, css, css3, html, html-element, html5, javascript, progress-circle, progressbar, web
• Language: JavaScript
• Homepage:
• Size: 282 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Progress-Circle:

### What is it?

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.

![Alt text](/progress-circle.png?raw=true "Circle Progressbar")

[Click here for Demo](https://mmgrant73.github.io/)

### How to use it?

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
					

			Link

		

		

		

		


	  

	

```	

### There are 8 properties (7 attributes and the innerHTML) that you can use to customize this element.

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