css-progress-pie/README.md

# CSS Progress Pie
This is a progress pie done in CSS. It came about when I needed a simple progress pie but didn't want to rely on any JS plugins as they took too long to load for a specific situation at work. I also felt that my CTO was going to strangle me if I introduce another JS plugin, especially one just for aethestic purposes :sweat_smile:.

## Examples

<a href="https://oliviale.github.io/CSS-Progress-Pie" target="_blank">See here for examples and use cases</a>.

![CSS Progress Pie examples](images/example.png)


## How To Use
1. Download the CSS or SCSS file and include it in your `<head>`. 

There are two kinds - default (single color) or colored with red, yellow and green for the numbers 1 to 40, 41 to 70 and 71 to 100 respectively.
``` html
<link rel="stylesheet" href="css/progress_pie_compiled.css"/>
```
2. HTML structure with `data-value` being a number from 1 to 100.
``` html
<div class="progress-pie" data-value="50"></div>
<div class="progress-pie-color" data-value="80"></div>
```
3. Uh... that's it.


## Changing colors, fonts, etc.
Manually change the properties of the CSS code. <a href="https://oliviale.github.io/CSS-Progress-Pie#styling" target="_blank">More details here</a>.

## Playground
[Play around in this Codepen](https://codepen.io/oliviale/pen/YqEgPw)

## License and other stuff
Do whatever you want license, but preferably do not delete the author comments in the CSS file :joy:.

Also, if you do end up using this and do wonderful things like you wonderful people always do, forking or tweeting your work at [me](http://twitter.com/meowlivia_) is appreciated.
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			`# CSS Progress Pie`
			`This is a progress pie done in CSS. It came about when I needed a simple progress pie but didn't want to rely on any JS plugins as they took too long to load for a specific situation at work. I also felt that my CTO was going to strangle me if I introduce another JS plugin, especially one just for aethestic purposes :sweat_smile:.`

			`## Examples`

so markdown doesn't have an option to open link in a new tab 2017-06-11 16:01:14 +08:00			`<a href="https://oliviale.github.io/CSS-Progress-Pie" target="_blank">See here for examples and use cases</a>.`
readme yay 2017-06-11 15:54:17 +08:00
Fix link fail 2017-06-11 04:33:52 +08:00			`![CSS Progress Pie examples](images/example.png)`
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00

			`## How To Use`
readme yay 2017-06-11 15:54:17 +08:00			1. Download the CSS or SCSS file and include it in your `<head>`.

			`There are two kinds - default (single color) or colored with red, yellow and green for the numbers 1 to 40, 41 to 70 and 71 to 100 respectively.`
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			``` html
Fix copy-and-paste-but-did-not-change-content and other minor bugs 2017-06-11 04:36:19 +08:00			`<link rel="stylesheet" href="css/progress_pie_compiled.css"/>`
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			```
readme yay 2017-06-11 15:54:17 +08:00			2. HTML structure with `data-value` being a number from 1 to 100.
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			``` html
			`<div class="progress-pie" data-value="50"></div>`
readme yay 2017-06-11 15:54:17 +08:00			`<div class="progress-pie-color" data-value="80"></div>`
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			```
			`3. Uh... that's it.`

readme yay 2017-06-11 15:54:17 +08:00
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			`## Changing colors, fonts, etc.`
so markdown doesn't have an option to open link in a new tab 2017-06-11 16:01:14 +08:00			`Manually change the properties of the CSS code. <a href="https://oliviale.github.io/CSS-Progress-Pie#styling" target="_blank">More details here</a>.`
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00
Fix copy-and-paste-but-did-not-change-content and other minor bugs 2017-06-11 04:36:19 +08:00			`## Playground`
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			`[Play around in this Codepen](https://codepen.io/oliviale/pen/YqEgPw)`

Fix copy-and-paste-but-did-not-change-content and other minor bugs 2017-06-11 04:36:19 +08:00			`## License and other stuff`
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			`Do whatever you want license, but preferably do not delete the author comments in the CSS file :joy:.`
Fix copy-and-paste-but-did-not-change-content and other minor bugs 2017-06-11 04:36:19 +08:00
R E A D M E B O I S :fire: 2017-06-11 04:31:28 +08:00			`Also, if you do end up using this and do wonderful things like you wonderful people always do, forking or tweeting your work at [me](http://twitter.com/meowlivia_) is appreciated.`