├── favicon.png ├── images └── example.png ├── LICENSE ├── css ├── progress_pie_scss.scss ├── progress_pie_color_scss.scss ├── progress_pie_compiled.css ├── progress_pie_color_compiled.css └── progress_pie_unicorn.css ├── README.md └── index.html /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oliviale/CSS-Progress-Pie/HEAD/favicon.png -------------------------------------------------------------------------------- /images/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oliviale/CSS-Progress-Pie/HEAD/images/example.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Olivia Ng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/progress_pie_scss.scss: -------------------------------------------------------------------------------- 1 | /* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/ 2 | 3 | .progress-pie { 4 | width: 60px; 5 | height: 60px; 6 | border-radius: 50%; 7 | background: #eee; 8 | background-image: linear-gradient(to right, transparent 50%, #4CC9D8 0); 9 | position: relative; 10 | display: inline-block; 11 | } 12 | 13 | .progress-pie::before { 14 | content: ''; 15 | display: block; 16 | margin-left: 50%; 17 | height: 100%; 18 | border-radius: 0 100% 100% 0 / 50%; 19 | background-color: inherit; 20 | transform-origin: left; 21 | } 22 | 23 | .progress-pie::after { 24 | content: attr(data-value); 25 | position: absolute; 26 | width: 70%; 27 | height: 70%; 28 | margin: auto; 29 | border-radius: 50%; 30 | background-color: #fff; 31 | left: 0; 32 | right: 0; 33 | top: 0; 34 | bottom: 0; 35 | text-align: center; 36 | font: 900 20px/41px Tahoma; 37 | } 38 | 39 | @for $i from 0 through 50 { 40 | .progress-pie[data-value="#{$i}"]:before { 41 | transform: rotate(#{$i/100}turn); 42 | } 43 | } 44 | 45 | @for $i from 51 through 100 { 46 | .progress-pie[data-value="#{$i}"]:before { 47 | background-color: #4CC9D8; 48 | transform: rotate(#{$i/100 - .5}turn); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Progress Pie 2 | 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:. 3 | 4 | ## Examples 5 | 6 | See here for examples and use cases. 7 | 8 | ![CSS Progress Pie examples](images/example.png) 9 | 10 | 11 | ## How To Use 12 | 1. Download the CSS or SCSS file and include it in your ``. 13 | 14 | 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. 15 | ``` html 16 | 17 | ``` 18 | 2. HTML structure with `data-value` being a number from 1 to 100. 19 | ``` html 20 |
21 |
22 | ``` 23 | 3. Uh... that's it. 24 | 25 | 26 | ## Changing colors, fonts, etc. 27 | Manually change the properties of the CSS code. More details here. 28 | 29 | ## Playground 30 | [Play around in this Codepen](https://codepen.io/oliviale/pen/YqEgPw) 31 | 32 | ## License and other stuff 33 | Do whatever you want license, but preferably do not delete the author comments in the CSS file :joy:. 34 | 35 | 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. 36 | -------------------------------------------------------------------------------- /css/progress_pie_color_scss.scss: -------------------------------------------------------------------------------- 1 | /* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/ 2 | 3 | .progress-pie-color { 4 | width: 60px; 5 | height: 60px; 6 | border-radius: 50%; 7 | background: #eee; 8 | position: relative; 9 | display: inline-block; 10 | } 11 | 12 | .progress-pie-color::before { 13 | content: ''; 14 | display: block; 15 | margin-left: 50%; 16 | height: 100%; 17 | border-radius: 0 100% 100% 0 / 50%; 18 | background-color: inherit; 19 | transform-origin: left; 20 | } 21 | 22 | .progress-pie-color::after { 23 | content: attr(data-value); 24 | position: absolute; 25 | width: 70%; 26 | height: 70%; 27 | margin: auto; 28 | border-radius: 50%; 29 | background-color: #fff; 30 | left: 0; 31 | right: 0; 32 | top: 0; 33 | bottom: 0; 34 | text-align: center; 35 | font: 900 20px/41px Lato; 36 | } 37 | 38 | @for $i from 0 through 40 { 39 | .progress-pie-color[data-value="#{$i}"] { 40 | background-image: linear-gradient(to right, transparent 50%, #cc0000 0); 41 | &:before { 42 | transform: rotate(#{$i/100}turn); 43 | } 44 | } 45 | } 46 | 47 | @for $i from 41 through 50 { 48 | .progress-pie-color[data-value="#{$i}"] { 49 | background-image: linear-gradient(to right, transparent 50%, #ffcf3a 0); 50 | &:before { 51 | transform: rotate(#{$i/100}turn); 52 | } 53 | } 54 | } 55 | 56 | @for $i from 51 through 70 { 57 | .progress-pie-color[data-value="#{$i}"] { 58 | background-image: linear-gradient(to right, transparent 50%, #ffcf3a 0); 59 | &:before { 60 | background-color: #ffcf3a; 61 | transform: rotate(#{$i/100 - .5}turn); 62 | } 63 | } 64 | } 65 | 66 | @for $i from 71 through 100 { 67 | .progress-pie-color[data-value="#{$i}"] { 68 | background-image: linear-gradient(to right, transparent 50%, #09944a 0); 69 | &:before { 70 | background-color: #09944a; 71 | transform: rotate(#{$i/100 - .5}turn); 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /css/progress_pie_compiled.css: -------------------------------------------------------------------------------- 1 | /* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/ 2 | .progress-pie{width:60px;height:60px;border-radius:50%;background:#eee;background-image:-webkit-linear-gradient(left,transparent 50%,#4CC9D8 0);background-image:linear-gradient(to right,transparent 50%,#4CC9D8 0);position:relative;display:inline-block;margin:10px}.progress-pie::before{content:'';display:block;margin-left:50%;height:100%;border-radius:0 100% 100% 0/50%;background-color:inherit;-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left}.progress-pie::after{content:attr(data-value);position:absolute;width:70%;height:70%;margin:auto;border-radius:50%;background-color:#fff;left:0;right:0;top:0;bottom:0;text-align:center;font:900 20px/41px Tahoma}.progress-pie[data-value="0"]:before{-webkit-transform:rotate(0turn);-ms-transform:rotate(0turn);transform:rotate(0turn)}.progress-pie[data-value="1"]:before{-webkit-transform:rotate(.01turn);-ms-transform:rotate(.01turn);transform:rotate(.01turn)}.progress-pie[data-value="2"]:before{-webkit-transform:rotate(.02turn);-ms-transform:rotate(.02turn);transform:rotate(.02turn)}.progress-pie[data-value="3"]:before{-webkit-transform:rotate(.03turn);-ms-transform:rotate(.03turn);transform:rotate(.03turn)}.progress-pie[data-value="4"]:before{-webkit-transform:rotate(.04turn);-ms-transform:rotate(.04turn);transform:rotate(.04turn)}.progress-pie[data-value="5"]:before{-webkit-transform:rotate(.05turn);-ms-transform:rotate(.05turn);transform:rotate(.05turn)}.progress-pie[data-value="6"]:before{-webkit-transform:rotate(.06turn);-ms-transform:rotate(.06turn);transform:rotate(.06turn)}.progress-pie[data-value="7"]:before{-webkit-transform:rotate(.07turn);-ms-transform:rotate(.07turn);transform:rotate(.07turn)}.progress-pie[data-value="8"]:before{-webkit-transform:rotate(.08turn);-ms-transform:rotate(.08turn);transform:rotate(.08turn)}.progress-pie[data-value="9"]:before{-webkit-transform:rotate(.09turn);-ms-transform:rotate(.09turn);transform:rotate(.09turn)}.progress-pie[data-value="10"]:before{-webkit-transform:rotate(.1turn);-ms-transform:rotate(.1turn);transform:rotate(.1turn)}.progress-pie[data-value="11"]:before{-webkit-transform:rotate(.11turn);-ms-transform:rotate(.11turn);transform:rotate(.11turn)}.progress-pie[data-value="12"]:before{-webkit-transform:rotate(.12turn);-ms-transform:rotate(.12turn);transform:rotate(.12turn)}.progress-pie[data-value="13"]:before{-webkit-transform:rotate(.13turn);-ms-transform:rotate(.13turn);transform:rotate(.13turn)}.progress-pie[data-value="14"]:before{-webkit-transform:rotate(.14turn);-ms-transform:rotate(.14turn);transform:rotate(.14turn)}.progress-pie[data-value="15"]:before{-webkit-transform:rotate(.15turn);-ms-transform:rotate(.15turn);transform:rotate(.15turn)}.progress-pie[data-value="16"]:before{-webkit-transform:rotate(.16turn);-ms-transform:rotate(.16turn);transform:rotate(.16turn)}.progress-pie[data-value="17"]:before{-webkit-transform:rotate(.17turn);-ms-transform:rotate(.17turn);transform:rotate(.17turn)}.progress-pie[data-value="18"]:before{-webkit-transform:rotate(.18turn);-ms-transform:rotate(.18turn);transform:rotate(.18turn)}.progress-pie[data-value="19"]:before{-webkit-transform:rotate(.19turn);-ms-transform:rotate(.19turn);transform:rotate(.19turn)}.progress-pie[data-value="20"]:before{-webkit-transform:rotate(.2turn);-ms-transform:rotate(.2turn);transform:rotate(.2turn)}.progress-pie[data-value="21"]:before{-webkit-transform:rotate(.21turn);-ms-transform:rotate(.21turn);transform:rotate(.21turn)}.progress-pie[data-value="22"]:before{-webkit-transform:rotate(.22turn);-ms-transform:rotate(.22turn);transform:rotate(.22turn)}.progress-pie[data-value="23"]:before{-webkit-transform:rotate(.23turn);-ms-transform:rotate(.23turn);transform:rotate(.23turn)}.progress-pie[data-value="24"]:before{-webkit-transform:rotate(.24turn);-ms-transform:rotate(.24turn);transform:rotate(.24turn)}.progress-pie[data-value="25"]:before{-webkit-transform:rotate(.25turn);-ms-transform:rotate(.25turn);transform:rotate(.25turn)}.progress-pie[data-value="26"]:before{-webkit-transform:rotate(.26turn);-ms-transform:rotate(.26turn);transform:rotate(.26turn)}.progress-pie[data-value="27"]:before{-webkit-transform:rotate(.27turn);-ms-transform:rotate(.27turn);transform:rotate(.27turn)}.progress-pie[data-value="28"]:before{-webkit-transform:rotate(.28turn);-ms-transform:rotate(.28turn);transform:rotate(.28turn)}.progress-pie[data-value="29"]:before{-webkit-transform:rotate(.29turn);-ms-transform:rotate(.29turn);transform:rotate(.29turn)}.progress-pie[data-value="30"]:before{-webkit-transform:rotate(.3turn);-ms-transform:rotate(.3turn);transform:rotate(.3turn)}.progress-pie[data-value="31"]:before{-webkit-transform:rotate(.31turn);-ms-transform:rotate(.31turn);transform:rotate(.31turn)}.progress-pie[data-value="32"]:before{-webkit-transform:rotate(.32turn);-ms-transform:rotate(.32turn);transform:rotate(.32turn)}.progress-pie[data-value="33"]:before{-webkit-transform:rotate(.33turn);-ms-transform:rotate(.33turn);transform:rotate(.33turn)}.progress-pie[data-value="34"]:before{-webkit-transform:rotate(.34turn);-ms-transform:rotate(.34turn);transform:rotate(.34turn)}.progress-pie[data-value="35"]:before{-webkit-transform:rotate(.35turn);-ms-transform:rotate(.35turn);transform:rotate(.35turn)}.progress-pie[data-value="36"]:before{-webkit-transform:rotate(.36turn);-ms-transform:rotate(.36turn);transform:rotate(.36turn)}.progress-pie[data-value="37"]:before{-webkit-transform:rotate(.37turn);-ms-transform:rotate(.37turn);transform:rotate(.37turn)}.progress-pie[data-value="38"]:before{-webkit-transform:rotate(.38turn);-ms-transform:rotate(.38turn);transform:rotate(.38turn)}.progress-pie[data-value="39"]:before{-webkit-transform:rotate(.39turn);-ms-transform:rotate(.39turn);transform:rotate(.39turn)}.progress-pie[data-value="40"]:before{-webkit-transform:rotate(.4turn);-ms-transform:rotate(.4turn);transform:rotate(.4turn)}.progress-pie[data-value="41"]:before{-webkit-transform:rotate(.41turn);-ms-transform:rotate(.41turn);transform:rotate(.41turn)}.progress-pie[data-value="42"]:before{-webkit-transform:rotate(.42turn);-ms-transform:rotate(.42turn);transform:rotate(.42turn)}.progress-pie[data-value="43"]:before{-webkit-transform:rotate(.43turn);-ms-transform:rotate(.43turn);transform:rotate(.43turn)}.progress-pie[data-value="44"]:before{-webkit-transform:rotate(.44turn);-ms-transform:rotate(.44turn);transform:rotate(.44turn)}.progress-pie[data-value="45"]:before{-webkit-transform:rotate(.45turn);-ms-transform:rotate(.45turn);transform:rotate(.45turn)}.progress-pie[data-value="46"]:before{-webkit-transform:rotate(.46turn);-ms-transform:rotate(.46turn);transform:rotate(.46turn)}.progress-pie[data-value="47"]:before{-webkit-transform:rotate(.47turn);-ms-transform:rotate(.47turn);transform:rotate(.47turn)}.progress-pie[data-value="48"]:before{-webkit-transform:rotate(.48turn);-ms-transform:rotate(.48turn);transform:rotate(.48turn)}.progress-pie[data-value="49"]:before{-webkit-transform:rotate(.49turn);-ms-transform:rotate(.49turn);transform:rotate(.49turn)}.progress-pie[data-value="50"]:before{-webkit-transform:rotate(.5turn);-ms-transform:rotate(.5turn);transform:rotate(.5turn)}.progress-pie[data-value="51"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.01turn);-ms-transform:rotate(.01turn);transform:rotate(.01turn)}.progress-pie[data-value="52"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.02turn);-ms-transform:rotate(.02turn);transform:rotate(.02turn)}.progress-pie[data-value="53"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.03turn);-ms-transform:rotate(.03turn);transform:rotate(.03turn)}.progress-pie[data-value="54"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.04turn);-ms-transform:rotate(.04turn);transform:rotate(.04turn)}.progress-pie[data-value="55"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.05turn);-ms-transform:rotate(.05turn);transform:rotate(.05turn)}.progress-pie[data-value="56"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.06turn);-ms-transform:rotate(.06turn);transform:rotate(.06turn)}.progress-pie[data-value="57"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.07turn);-ms-transform:rotate(.07turn);transform:rotate(.07turn)}.progress-pie[data-value="58"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.08turn);-ms-transform:rotate(.08turn);transform:rotate(.08turn)}.progress-pie[data-value="59"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.09turn);-ms-transform:rotate(.09turn);transform:rotate(.09turn)}.progress-pie[data-value="60"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.1turn);-ms-transform:rotate(.1turn);transform:rotate(.1turn)}.progress-pie[data-value="61"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.11turn);-ms-transform:rotate(.11turn);transform:rotate(.11turn)}.progress-pie[data-value="62"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.12turn);-ms-transform:rotate(.12turn);transform:rotate(.12turn)}.progress-pie[data-value="63"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.13turn);-ms-transform:rotate(.13turn);transform:rotate(.13turn)}.progress-pie[data-value="64"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.14turn);-ms-transform:rotate(.14turn);transform:rotate(.14turn)}.progress-pie[data-value="65"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.15turn);-ms-transform:rotate(.15turn);transform:rotate(.15turn)}.progress-pie[data-value="66"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.16turn);-ms-transform:rotate(.16turn);transform:rotate(.16turn)}.progress-pie[data-value="67"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.17turn);-ms-transform:rotate(.17turn);transform:rotate(.17turn)}.progress-pie[data-value="68"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.18turn);-ms-transform:rotate(.18turn);transform:rotate(.18turn)}.progress-pie[data-value="69"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.19turn);-ms-transform:rotate(.19turn);transform:rotate(.19turn)}.progress-pie[data-value="70"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.2turn);-ms-transform:rotate(.2turn);transform:rotate(.2turn)}.progress-pie[data-value="71"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.21turn);-ms-transform:rotate(.21turn);transform:rotate(.21turn)}.progress-pie[data-value="72"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.22turn);-ms-transform:rotate(.22turn);transform:rotate(.22turn)}.progress-pie[data-value="73"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.23turn);-ms-transform:rotate(.23turn);transform:rotate(.23turn)}.progress-pie[data-value="74"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.24turn);-ms-transform:rotate(.24turn);transform:rotate(.24turn)}.progress-pie[data-value="75"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.25turn);-ms-transform:rotate(.25turn);transform:rotate(.25turn)}.progress-pie[data-value="76"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.26turn);-ms-transform:rotate(.26turn);transform:rotate(.26turn)}.progress-pie[data-value="77"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.27turn);-ms-transform:rotate(.27turn);transform:rotate(.27turn)}.progress-pie[data-value="78"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.28turn);-ms-transform:rotate(.28turn);transform:rotate(.28turn)}.progress-pie[data-value="79"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.29turn);-ms-transform:rotate(.29turn);transform:rotate(.29turn)}.progress-pie[data-value="80"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.3turn);-ms-transform:rotate(.3turn);transform:rotate(.3turn)}.progress-pie[data-value="81"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.31turn);-ms-transform:rotate(.31turn);transform:rotate(.31turn)}.progress-pie[data-value="82"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.32turn);-ms-transform:rotate(.32turn);transform:rotate(.32turn)}.progress-pie[data-value="83"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.33turn);-ms-transform:rotate(.33turn);transform:rotate(.33turn)}.progress-pie[data-value="84"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.34turn);-ms-transform:rotate(.34turn);transform:rotate(.34turn)}.progress-pie[data-value="85"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.35turn);-ms-transform:rotate(.35turn);transform:rotate(.35turn)}.progress-pie[data-value="86"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.36turn);-ms-transform:rotate(.36turn);transform:rotate(.36turn)}.progress-pie[data-value="87"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.37turn);-ms-transform:rotate(.37turn);transform:rotate(.37turn)}.progress-pie[data-value="88"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.38turn);-ms-transform:rotate(.38turn);transform:rotate(.38turn)}.progress-pie[data-value="89"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.39turn);-ms-transform:rotate(.39turn);transform:rotate(.39turn)}.progress-pie[data-value="90"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.4turn);-ms-transform:rotate(.4turn);transform:rotate(.4turn)}.progress-pie[data-value="91"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.41turn);-ms-transform:rotate(.41turn);transform:rotate(.41turn)}.progress-pie[data-value="92"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.42turn);-ms-transform:rotate(.42turn);transform:rotate(.42turn)}.progress-pie[data-value="93"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.43turn);-ms-transform:rotate(.43turn);transform:rotate(.43turn)}.progress-pie[data-value="94"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.44turn);-ms-transform:rotate(.44turn);transform:rotate(.44turn)}.progress-pie[data-value="95"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.45turn);-ms-transform:rotate(.45turn);transform:rotate(.45turn)}.progress-pie[data-value="96"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.46turn);-ms-transform:rotate(.46turn);transform:rotate(.46turn)}.progress-pie[data-value="97"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.47turn);-ms-transform:rotate(.47turn);transform:rotate(.47turn)}.progress-pie[data-value="98"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.48turn);-ms-transform:rotate(.48turn);transform:rotate(.48turn)}.progress-pie[data-value="99"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.49turn);-ms-transform:rotate(.49turn);transform:rotate(.49turn)}.progress-pie[data-value="100"]:before{background-color:#4CC9D8;-webkit-transform:rotate(.5turn);-ms-transform:rotate(.5turn);transform:rotate(.5turn)} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Progress Pie by oliviale 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 448 | 449 | 450 | 451 |
452 |

CSS Progress Pie

453 | 454 |
455 |

Default

456 |
457 |
458 | HTML: 459 | 460 | <div 461 | class="progress-pie" 462 | data-value="93"></div> 463 | 464 |
465 |
466 |
467 |
468 |
469 |
470 | 471 |
472 |

Colored

473 |

Red for numbers 1 to 40, yellow for 41 to 70 and green for 71 to 100.

474 |
475 |
476 | HTML: 477 | 478 | <div 479 | class="progress-pie-color" 480 | data-value="22"></div> 481 | 482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 | HTML: 490 | 491 | <div 492 | class="progress-pie-color" 493 | data-value="55"></div> 494 | 495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 | HTML: 503 | 504 | <div 505 | class="progress-pie-color" 506 | data-value="93"></div> 507 | 508 |
509 |
510 |
511 |
512 |
513 |
514 | 515 |
516 |

Use Cases

517 |
518 |
519 |
520 |
A Fancy To-Do List
521 |
522 |
523 |
Finish this page
524 | You're almost there! 525 |
526 |
527 |
528 |
Tea time: Chocolate cake & green tea latte
529 | Halfway through... 530 |
531 |
532 |
533 |
Check #Slack Messages
534 | Slow progress. Have you been slacking? Ha-ha. Get it? 535 |
536 |
537 |
538 |
539 |
540 |
541 |
542 |
% Complete
543 |

Keep going...

544 |
545 |
546 |

Answer the question below truthfully.

547 |
Which was your starter Pokemon?
548 |
549 | 553 |
554 |
555 | 559 |
560 |
561 | 565 |
566 |
567 |
568 |
569 |
570 |
571 |
572 |

Meme Skills

573 |
574 |
575 | Understanding 576 |
577 |
578 |
579 | Integrating 580 |
581 |
582 |
583 | Making 584 |
585 |
586 |
587 | Dreaming 588 |
589 |
590 |
591 |
592 |
593 |
594 | 595 |
596 |

Styling

597 |
598 |
599 |
Color
600 |

It is advised to make your changes in the SCSS file and compile it to CSS.
Otherwise, please make good use of your Find All + Replace option.

601 |
602 |
603 |
604 |
605 |
606 |
607 |
608 |
609 | SCSS: 610 | .progress-pie { 611 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 612 | } 613 | 614 | @for $i from 51 through 100 { 615 | .progress-pie[data-value="#{$i}"]:before { 616 | background-color: #bf62a6; 617 | } 618 | } 619 |
620 |
621 | 622 |
623 |
624 |
Color of passive ring
625 |

Changes are made to the background-color property of .progress-pie. 626 |

627 |
628 |
629 |
630 |
631 |
632 | CSS: 633 | .progress-pie-unicorn.dark-ring { 634 | background-color: #222; 635 | } 636 | 637 | // white-ring with box shadow 638 | .progress-pie.gray-ring { 639 | background-color: #fff; 640 | box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 641 | } 642 | .progress-pie.gray-ring:after { 643 | box-shadow: inset 1px 0px 3px rgba(0,0,0,0.3); 644 | } 645 |
646 |
647 | 648 |
649 | 650 |
651 |
Inner background, font and color of text
652 |

Changes are made to the :after pseudo-element of .progress-pie. 653 |

654 |
655 |
656 |
657 |
658 |
659 |
660 |
661 |
662 | CSS: 663 | .progress-pie.dark-theme:after { 664 | background: #111; 665 | color: #ffcf3a; 666 | } 667 | 668 | // changing font 669 | .progress-pie.normal-theme:after { 670 | font: 700 26px/42px 'Palatino', serif; 671 | } 672 | 673 | // using a transparent background works 674 | .progress-pie.transparent:after { 675 | background: transparent; 676 | } 677 |
678 |
679 | 680 |
681 |
682 |
Size of pie
683 |

The pie must always be a square, i.e. the height and width must be the same.

684 |

Do note that if you adjust the size too much, you will need to adjust the font size as well. Balance.

685 |
686 |
687 |
688 |
689 |
690 |
691 | CSS: 692 | .progress-pie.large { 693 | width: 90px; 694 | height: 90px; 695 | } 696 | 697 | .progress-pie.small { 698 | width: 40px; 699 | height: 40px; 700 | } 701 |
702 |
703 | 704 |
705 |
706 |
Size of ring
707 |

Change the size of ring by adjusting the width and height of the text overlap. The width and height must also be the same.

708 |

Do note that if you adjust the size too much, you will need to adjust the font size as well. Balance.

709 |
710 |
711 |
712 |
713 |
714 |
715 | CSS: 716 | .progress-pie.thick:after { 717 | width: 45%; 718 | height: 45%; 719 | } 720 | 721 | .progress-pie.thin:after { 722 | width: 90%; 723 | height: 90%; 724 | } 725 |
726 |
727 | 728 |
729 |
730 |
731 | 734 |
735 | -------------------------------------------------------------------------------- /css/progress_pie_color_compiled.css: -------------------------------------------------------------------------------- 1 | /* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/ 2 | .progress-pie-color{width:60px;height:60px;border-radius:50%;background:#eee;position:relative;display:inline-block}.progress-pie-color::before{content:'';display:block;margin-left:50%;height:100%;border-radius:0 100% 100% 0/50%;background-color:inherit;-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left}.progress-pie-color::after{content:attr(data-value);position:absolute;width:70%;height:70%;margin:auto;border-radius:50%;background-color:#fff;left:0;right:0;top:0;bottom:0;text-align:center;font:900 20px/41px Tahoma}.progress-pie-color[data-value="0"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="0"]:before{-webkit-transform:rotate(0turn);-ms-transform:rotate(0turn);transform:rotate(0turn)}.progress-pie-color[data-value="1"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="1"]:before{-webkit-transform:rotate(.01turn);-ms-transform:rotate(.01turn);transform:rotate(.01turn)}.progress-pie-color[data-value="2"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="2"]:before{-webkit-transform:rotate(.02turn);-ms-transform:rotate(.02turn);transform:rotate(.02turn)}.progress-pie-color[data-value="3"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="3"]:before{-webkit-transform:rotate(.03turn);-ms-transform:rotate(.03turn);transform:rotate(.03turn)}.progress-pie-color[data-value="4"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="4"]:before{-webkit-transform:rotate(.04turn);-ms-transform:rotate(.04turn);transform:rotate(.04turn)}.progress-pie-color[data-value="5"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="5"]:before{-webkit-transform:rotate(.05turn);-ms-transform:rotate(.05turn);transform:rotate(.05turn)}.progress-pie-color[data-value="6"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="6"]:before{-webkit-transform:rotate(.06turn);-ms-transform:rotate(.06turn);transform:rotate(.06turn)}.progress-pie-color[data-value="7"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="7"]:before{-webkit-transform:rotate(.07turn);-ms-transform:rotate(.07turn);transform:rotate(.07turn)}.progress-pie-color[data-value="8"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="8"]:before{-webkit-transform:rotate(.08turn);-ms-transform:rotate(.08turn);transform:rotate(.08turn)}.progress-pie-color[data-value="9"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="9"]:before{-webkit-transform:rotate(.09turn);-ms-transform:rotate(.09turn);transform:rotate(.09turn)}.progress-pie-color[data-value="10"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="10"]:before{-webkit-transform:rotate(.1turn);-ms-transform:rotate(.1turn);transform:rotate(.1turn)}.progress-pie-color[data-value="11"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="11"]:before{-webkit-transform:rotate(.11turn);-ms-transform:rotate(.11turn);transform:rotate(.11turn)}.progress-pie-color[data-value="12"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="12"]:before{-webkit-transform:rotate(.12turn);-ms-transform:rotate(.12turn);transform:rotate(.12turn)}.progress-pie-color[data-value="13"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="13"]:before{-webkit-transform:rotate(.13turn);-ms-transform:rotate(.13turn);transform:rotate(.13turn)}.progress-pie-color[data-value="14"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="14"]:before{-webkit-transform:rotate(.14turn);-ms-transform:rotate(.14turn);transform:rotate(.14turn)}.progress-pie-color[data-value="15"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="15"]:before{-webkit-transform:rotate(.15turn);-ms-transform:rotate(.15turn);transform:rotate(.15turn)}.progress-pie-color[data-value="16"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="16"]:before{-webkit-transform:rotate(.16turn);-ms-transform:rotate(.16turn);transform:rotate(.16turn)}.progress-pie-color[data-value="17"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="17"]:before{-webkit-transform:rotate(.17turn);-ms-transform:rotate(.17turn);transform:rotate(.17turn)}.progress-pie-color[data-value="18"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="18"]:before{-webkit-transform:rotate(.18turn);-ms-transform:rotate(.18turn);transform:rotate(.18turn)}.progress-pie-color[data-value="19"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="19"]:before{-webkit-transform:rotate(.19turn);-ms-transform:rotate(.19turn);transform:rotate(.19turn)}.progress-pie-color[data-value="20"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="20"]:before{-webkit-transform:rotate(.2turn);-ms-transform:rotate(.2turn);transform:rotate(.2turn)}.progress-pie-color[data-value="21"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="21"]:before{-webkit-transform:rotate(.21turn);-ms-transform:rotate(.21turn);transform:rotate(.21turn)}.progress-pie-color[data-value="22"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="22"]:before{-webkit-transform:rotate(.22turn);-ms-transform:rotate(.22turn);transform:rotate(.22turn)}.progress-pie-color[data-value="23"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="23"]:before{-webkit-transform:rotate(.23turn);-ms-transform:rotate(.23turn);transform:rotate(.23turn)}.progress-pie-color[data-value="24"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="24"]:before{-webkit-transform:rotate(.24turn);-ms-transform:rotate(.24turn);transform:rotate(.24turn)}.progress-pie-color[data-value="25"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="25"]:before{-webkit-transform:rotate(.25turn);-ms-transform:rotate(.25turn);transform:rotate(.25turn)}.progress-pie-color[data-value="26"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="26"]:before{-webkit-transform:rotate(.26turn);-ms-transform:rotate(.26turn);transform:rotate(.26turn)}.progress-pie-color[data-value="27"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="27"]:before{-webkit-transform:rotate(.27turn);-ms-transform:rotate(.27turn);transform:rotate(.27turn)}.progress-pie-color[data-value="28"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="28"]:before{-webkit-transform:rotate(.28turn);-ms-transform:rotate(.28turn);transform:rotate(.28turn)}.progress-pie-color[data-value="29"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="29"]:before{-webkit-transform:rotate(.29turn);-ms-transform:rotate(.29turn);transform:rotate(.29turn)}.progress-pie-color[data-value="30"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="30"]:before{-webkit-transform:rotate(.3turn);-ms-transform:rotate(.3turn);transform:rotate(.3turn)}.progress-pie-color[data-value="31"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="31"]:before{-webkit-transform:rotate(.31turn);-ms-transform:rotate(.31turn);transform:rotate(.31turn)}.progress-pie-color[data-value="32"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="32"]:before{-webkit-transform:rotate(.32turn);-ms-transform:rotate(.32turn);transform:rotate(.32turn)}.progress-pie-color[data-value="33"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="33"]:before{-webkit-transform:rotate(.33turn);-ms-transform:rotate(.33turn);transform:rotate(.33turn)}.progress-pie-color[data-value="34"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="34"]:before{-webkit-transform:rotate(.34turn);-ms-transform:rotate(.34turn);transform:rotate(.34turn)}.progress-pie-color[data-value="35"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="35"]:before{-webkit-transform:rotate(.35turn);-ms-transform:rotate(.35turn);transform:rotate(.35turn)}.progress-pie-color[data-value="36"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="36"]:before{-webkit-transform:rotate(.36turn);-ms-transform:rotate(.36turn);transform:rotate(.36turn)}.progress-pie-color[data-value="37"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="37"]:before{-webkit-transform:rotate(.37turn);-ms-transform:rotate(.37turn);transform:rotate(.37turn)}.progress-pie-color[data-value="38"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="38"]:before{-webkit-transform:rotate(.38turn);-ms-transform:rotate(.38turn);transform:rotate(.38turn)}.progress-pie-color[data-value="39"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="39"]:before{-webkit-transform:rotate(.39turn);-ms-transform:rotate(.39turn);transform:rotate(.39turn)}.progress-pie-color[data-value="40"]{background-image:-webkit-linear-gradient(left,transparent 50%,#c00 0);background-image:linear-gradient(to right,transparent 50%,#c00 0)}.progress-pie-color[data-value="40"]:before{-webkit-transform:rotate(.4turn);-ms-transform:rotate(.4turn);transform:rotate(.4turn)}.progress-pie-color[data-value="41"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="41"]:before{-webkit-transform:rotate(.41turn);-ms-transform:rotate(.41turn);transform:rotate(.41turn)}.progress-pie-color[data-value="42"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="42"]:before{-webkit-transform:rotate(.42turn);-ms-transform:rotate(.42turn);transform:rotate(.42turn)}.progress-pie-color[data-value="43"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="43"]:before{-webkit-transform:rotate(.43turn);-ms-transform:rotate(.43turn);transform:rotate(.43turn)}.progress-pie-color[data-value="44"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="44"]:before{-webkit-transform:rotate(.44turn);-ms-transform:rotate(.44turn);transform:rotate(.44turn)}.progress-pie-color[data-value="45"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="45"]:before{-webkit-transform:rotate(.45turn);-ms-transform:rotate(.45turn);transform:rotate(.45turn)}.progress-pie-color[data-value="46"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="46"]:before{-webkit-transform:rotate(.46turn);-ms-transform:rotate(.46turn);transform:rotate(.46turn)}.progress-pie-color[data-value="47"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="47"]:before{-webkit-transform:rotate(.47turn);-ms-transform:rotate(.47turn);transform:rotate(.47turn)}.progress-pie-color[data-value="48"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="48"]:before{-webkit-transform:rotate(.48turn);-ms-transform:rotate(.48turn);transform:rotate(.48turn)}.progress-pie-color[data-value="49"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="49"]:before{-webkit-transform:rotate(.49turn);-ms-transform:rotate(.49turn);transform:rotate(.49turn)}.progress-pie-color[data-value="50"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="50"]:before{-webkit-transform:rotate(.5turn);-ms-transform:rotate(.5turn);transform:rotate(.5turn)}.progress-pie-color[data-value="51"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="51"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.01turn);-ms-transform:rotate(.01turn);transform:rotate(.01turn)}.progress-pie-color[data-value="52"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="52"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.02turn);-ms-transform:rotate(.02turn);transform:rotate(.02turn)}.progress-pie-color[data-value="53"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="53"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.03turn);-ms-transform:rotate(.03turn);transform:rotate(.03turn)}.progress-pie-color[data-value="54"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="54"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.04turn);-ms-transform:rotate(.04turn);transform:rotate(.04turn)}.progress-pie-color[data-value="55"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="55"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.05turn);-ms-transform:rotate(.05turn);transform:rotate(.05turn)}.progress-pie-color[data-value="56"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="56"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.06turn);-ms-transform:rotate(.06turn);transform:rotate(.06turn)}.progress-pie-color[data-value="57"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="57"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.07turn);-ms-transform:rotate(.07turn);transform:rotate(.07turn)}.progress-pie-color[data-value="58"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="58"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.08turn);-ms-transform:rotate(.08turn);transform:rotate(.08turn)}.progress-pie-color[data-value="59"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="59"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.09turn);-ms-transform:rotate(.09turn);transform:rotate(.09turn)}.progress-pie-color[data-value="60"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="60"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.1turn);-ms-transform:rotate(.1turn);transform:rotate(.1turn)}.progress-pie-color[data-value="61"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="61"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.11turn);-ms-transform:rotate(.11turn);transform:rotate(.11turn)}.progress-pie-color[data-value="62"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="62"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.12turn);-ms-transform:rotate(.12turn);transform:rotate(.12turn)}.progress-pie-color[data-value="63"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="63"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.13turn);-ms-transform:rotate(.13turn);transform:rotate(.13turn)}.progress-pie-color[data-value="64"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="64"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.14turn);-ms-transform:rotate(.14turn);transform:rotate(.14turn)}.progress-pie-color[data-value="65"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="65"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.15turn);-ms-transform:rotate(.15turn);transform:rotate(.15turn)}.progress-pie-color[data-value="66"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="66"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.16turn);-ms-transform:rotate(.16turn);transform:rotate(.16turn)}.progress-pie-color[data-value="67"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="67"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.17turn);-ms-transform:rotate(.17turn);transform:rotate(.17turn)}.progress-pie-color[data-value="68"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="68"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.18turn);-ms-transform:rotate(.18turn);transform:rotate(.18turn)}.progress-pie-color[data-value="69"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="69"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.19turn);-ms-transform:rotate(.19turn);transform:rotate(.19turn)}.progress-pie-color[data-value="70"]{background-image:-webkit-linear-gradient(left,transparent 50%,#ffcf3a 0);background-image:linear-gradient(to right,transparent 50%,#ffcf3a 0)}.progress-pie-color[data-value="70"]:before{background-color:#ffcf3a;-webkit-transform:rotate(.2turn);-ms-transform:rotate(.2turn);transform:rotate(.2turn)}.progress-pie-color[data-value="71"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="71"]:before{background-color:#09944a;-webkit-transform:rotate(.21turn);-ms-transform:rotate(.21turn);transform:rotate(.21turn)}.progress-pie-color[data-value="72"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="72"]:before{background-color:#09944a;-webkit-transform:rotate(.22turn);-ms-transform:rotate(.22turn);transform:rotate(.22turn)}.progress-pie-color[data-value="73"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="73"]:before{background-color:#09944a;-webkit-transform:rotate(.23turn);-ms-transform:rotate(.23turn);transform:rotate(.23turn)}.progress-pie-color[data-value="74"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="74"]:before{background-color:#09944a;-webkit-transform:rotate(.24turn);-ms-transform:rotate(.24turn);transform:rotate(.24turn)}.progress-pie-color[data-value="75"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="75"]:before{background-color:#09944a;-webkit-transform:rotate(.25turn);-ms-transform:rotate(.25turn);transform:rotate(.25turn)}.progress-pie-color[data-value="76"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="76"]:before{background-color:#09944a;-webkit-transform:rotate(.26turn);-ms-transform:rotate(.26turn);transform:rotate(.26turn)}.progress-pie-color[data-value="77"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="77"]:before{background-color:#09944a;-webkit-transform:rotate(.27turn);-ms-transform:rotate(.27turn);transform:rotate(.27turn)}.progress-pie-color[data-value="78"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="78"]:before{background-color:#09944a;-webkit-transform:rotate(.28turn);-ms-transform:rotate(.28turn);transform:rotate(.28turn)}.progress-pie-color[data-value="79"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="79"]:before{background-color:#09944a;-webkit-transform:rotate(.29turn);-ms-transform:rotate(.29turn);transform:rotate(.29turn)}.progress-pie-color[data-value="80"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="80"]:before{background-color:#09944a;-webkit-transform:rotate(.3turn);-ms-transform:rotate(.3turn);transform:rotate(.3turn)}.progress-pie-color[data-value="81"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="81"]:before{background-color:#09944a;-webkit-transform:rotate(.31turn);-ms-transform:rotate(.31turn);transform:rotate(.31turn)}.progress-pie-color[data-value="82"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="82"]:before{background-color:#09944a;-webkit-transform:rotate(.32turn);-ms-transform:rotate(.32turn);transform:rotate(.32turn)}.progress-pie-color[data-value="83"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="83"]:before{background-color:#09944a;-webkit-transform:rotate(.33turn);-ms-transform:rotate(.33turn);transform:rotate(.33turn)}.progress-pie-color[data-value="84"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="84"]:before{background-color:#09944a;-webkit-transform:rotate(.34turn);-ms-transform:rotate(.34turn);transform:rotate(.34turn)}.progress-pie-color[data-value="85"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="85"]:before{background-color:#09944a;-webkit-transform:rotate(.35turn);-ms-transform:rotate(.35turn);transform:rotate(.35turn)}.progress-pie-color[data-value="86"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="86"]:before{background-color:#09944a;-webkit-transform:rotate(.36turn);-ms-transform:rotate(.36turn);transform:rotate(.36turn)}.progress-pie-color[data-value="87"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="87"]:before{background-color:#09944a;-webkit-transform:rotate(.37turn);-ms-transform:rotate(.37turn);transform:rotate(.37turn)}.progress-pie-color[data-value="88"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="88"]:before{background-color:#09944a;-webkit-transform:rotate(.38turn);-ms-transform:rotate(.38turn);transform:rotate(.38turn)}.progress-pie-color[data-value="89"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="89"]:before{background-color:#09944a;-webkit-transform:rotate(.39turn);-ms-transform:rotate(.39turn);transform:rotate(.39turn)}.progress-pie-color[data-value="90"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="90"]:before{background-color:#09944a;-webkit-transform:rotate(.4turn);-ms-transform:rotate(.4turn);transform:rotate(.4turn)}.progress-pie-color[data-value="91"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="91"]:before{background-color:#09944a;-webkit-transform:rotate(.41turn);-ms-transform:rotate(.41turn);transform:rotate(.41turn)}.progress-pie-color[data-value="92"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="92"]:before{background-color:#09944a;-webkit-transform:rotate(.42turn);-ms-transform:rotate(.42turn);transform:rotate(.42turn)}.progress-pie-color[data-value="93"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="93"]:before{background-color:#09944a;-webkit-transform:rotate(.43turn);-ms-transform:rotate(.43turn);transform:rotate(.43turn)}.progress-pie-color[data-value="94"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="94"]:before{background-color:#09944a;-webkit-transform:rotate(.44turn);-ms-transform:rotate(.44turn);transform:rotate(.44turn)}.progress-pie-color[data-value="95"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="95"]:before{background-color:#09944a;-webkit-transform:rotate(.45turn);-ms-transform:rotate(.45turn);transform:rotate(.45turn)}.progress-pie-color[data-value="96"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="96"]:before{background-color:#09944a;-webkit-transform:rotate(.46turn);-ms-transform:rotate(.46turn);transform:rotate(.46turn)}.progress-pie-color[data-value="97"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="97"]:before{background-color:#09944a;-webkit-transform:rotate(.47turn);-ms-transform:rotate(.47turn);transform:rotate(.47turn)}.progress-pie-color[data-value="98"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="98"]:before{background-color:#09944a;-webkit-transform:rotate(.48turn);-ms-transform:rotate(.48turn);transform:rotate(.48turn)}.progress-pie-color[data-value="99"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="99"]:before{background-color:#09944a;-webkit-transform:rotate(.49turn);-ms-transform:rotate(.49turn);transform:rotate(.49turn)}.progress-pie-color[data-value="100"]{background-image:-webkit-linear-gradient(left,transparent 50%,#09944a 0);background-image:linear-gradient(to right,transparent 50%,#09944a 0)}.progress-pie-color[data-value="100"]:before{background-color:#09944a;-webkit-transform:rotate(.5turn);-ms-transform:rotate(.5turn);transform:rotate(.5turn)} -------------------------------------------------------------------------------- /css/progress_pie_unicorn.css: -------------------------------------------------------------------------------- 1 | /* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/ 2 | /* For site examples - ignore */ 3 | .progress-pie-unicorn { 4 | width: 60px; 5 | height: 60px; 6 | border-radius: 50%; 7 | background: #eee; 8 | position: relative; 9 | display: inline-block; 10 | } 11 | 12 | .progress-pie-unicorn::before { 13 | content: ''; 14 | display: block; 15 | margin-left: 50%; 16 | height: 100%; 17 | border-radius: 0 100% 100% 0 / 50%; 18 | background-color: inherit; 19 | -webkit-transform-origin: left; 20 | -ms-transform-origin: left; 21 | transform-origin: left; 22 | } 23 | 24 | .progress-pie-unicorn::after { 25 | content: attr(data-value); 26 | position: absolute; 27 | width: 70%; 28 | height: 70%; 29 | margin: auto; 30 | border-radius: 50%; 31 | background-color: #fff; 32 | left: 0; 33 | right: 0; 34 | top: 0; 35 | bottom: 0; 36 | text-align: center; 37 | font: 900 20px/41px Tahoma; 38 | } 39 | 40 | .progress-pie-unicorn[data-value="0"] { 41 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 42 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 43 | } 44 | .progress-pie-unicorn[data-value="0"]:before { 45 | -webkit-transform: rotate(0turn); 46 | -ms-transform: rotate(0turn); 47 | transform: rotate(0turn); 48 | } 49 | 50 | .progress-pie-unicorn[data-value="1"] { 51 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 52 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 53 | } 54 | .progress-pie-unicorn[data-value="1"]:before { 55 | -webkit-transform: rotate(0.01turn); 56 | -ms-transform: rotate(0.01turn); 57 | transform: rotate(0.01turn); 58 | } 59 | 60 | .progress-pie-unicorn[data-value="2"] { 61 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 62 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 63 | } 64 | .progress-pie-unicorn[data-value="2"]:before { 65 | -webkit-transform: rotate(0.02turn); 66 | -ms-transform: rotate(0.02turn); 67 | transform: rotate(0.02turn); 68 | } 69 | 70 | .progress-pie-unicorn[data-value="3"] { 71 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 72 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 73 | } 74 | .progress-pie-unicorn[data-value="3"]:before { 75 | -webkit-transform: rotate(0.03turn); 76 | -ms-transform: rotate(0.03turn); 77 | transform: rotate(0.03turn); 78 | } 79 | 80 | .progress-pie-unicorn[data-value="4"] { 81 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 82 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 83 | } 84 | .progress-pie-unicorn[data-value="4"]:before { 85 | -webkit-transform: rotate(0.04turn); 86 | -ms-transform: rotate(0.04turn); 87 | transform: rotate(0.04turn); 88 | } 89 | 90 | .progress-pie-unicorn[data-value="5"] { 91 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 92 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 93 | } 94 | .progress-pie-unicorn[data-value="5"]:before { 95 | -webkit-transform: rotate(0.05turn); 96 | -ms-transform: rotate(0.05turn); 97 | transform: rotate(0.05turn); 98 | } 99 | 100 | .progress-pie-unicorn[data-value="6"] { 101 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 102 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 103 | } 104 | .progress-pie-unicorn[data-value="6"]:before { 105 | -webkit-transform: rotate(0.06turn); 106 | -ms-transform: rotate(0.06turn); 107 | transform: rotate(0.06turn); 108 | } 109 | 110 | .progress-pie-unicorn[data-value="7"] { 111 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 112 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 113 | } 114 | .progress-pie-unicorn[data-value="7"]:before { 115 | -webkit-transform: rotate(0.07turn); 116 | -ms-transform: rotate(0.07turn); 117 | transform: rotate(0.07turn); 118 | } 119 | 120 | .progress-pie-unicorn[data-value="8"] { 121 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 122 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 123 | } 124 | .progress-pie-unicorn[data-value="8"]:before { 125 | -webkit-transform: rotate(0.08turn); 126 | -ms-transform: rotate(0.08turn); 127 | transform: rotate(0.08turn); 128 | } 129 | 130 | .progress-pie-unicorn[data-value="9"] { 131 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 132 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 133 | } 134 | .progress-pie-unicorn[data-value="9"]:before { 135 | -webkit-transform: rotate(0.09turn); 136 | -ms-transform: rotate(0.09turn); 137 | transform: rotate(0.09turn); 138 | } 139 | 140 | .progress-pie-unicorn[data-value="10"] { 141 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 142 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 143 | } 144 | .progress-pie-unicorn[data-value="10"]:before { 145 | -webkit-transform: rotate(0.1turn); 146 | -ms-transform: rotate(0.1turn); 147 | transform: rotate(0.1turn); 148 | } 149 | 150 | .progress-pie-unicorn[data-value="11"] { 151 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 152 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 153 | } 154 | .progress-pie-unicorn[data-value="11"]:before { 155 | -webkit-transform: rotate(0.11turn); 156 | -ms-transform: rotate(0.11turn); 157 | transform: rotate(0.11turn); 158 | } 159 | 160 | .progress-pie-unicorn[data-value="12"] { 161 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 162 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 163 | } 164 | .progress-pie-unicorn[data-value="12"]:before { 165 | -webkit-transform: rotate(0.12turn); 166 | -ms-transform: rotate(0.12turn); 167 | transform: rotate(0.12turn); 168 | } 169 | 170 | .progress-pie-unicorn[data-value="13"] { 171 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 172 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 173 | } 174 | .progress-pie-unicorn[data-value="13"]:before { 175 | -webkit-transform: rotate(0.13turn); 176 | -ms-transform: rotate(0.13turn); 177 | transform: rotate(0.13turn); 178 | } 179 | 180 | .progress-pie-unicorn[data-value="14"] { 181 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 182 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 183 | } 184 | .progress-pie-unicorn[data-value="14"]:before { 185 | -webkit-transform: rotate(0.14turn); 186 | -ms-transform: rotate(0.14turn); 187 | transform: rotate(0.14turn); 188 | } 189 | 190 | .progress-pie-unicorn[data-value="15"] { 191 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 192 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 193 | } 194 | .progress-pie-unicorn[data-value="15"]:before { 195 | -webkit-transform: rotate(0.15turn); 196 | -ms-transform: rotate(0.15turn); 197 | transform: rotate(0.15turn); 198 | } 199 | 200 | .progress-pie-unicorn[data-value="16"] { 201 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 202 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 203 | } 204 | .progress-pie-unicorn[data-value="16"]:before { 205 | -webkit-transform: rotate(0.16turn); 206 | -ms-transform: rotate(0.16turn); 207 | transform: rotate(0.16turn); 208 | } 209 | 210 | .progress-pie-unicorn[data-value="17"] { 211 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 212 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 213 | } 214 | .progress-pie-unicorn[data-value="17"]:before { 215 | -webkit-transform: rotate(0.17turn); 216 | -ms-transform: rotate(0.17turn); 217 | transform: rotate(0.17turn); 218 | } 219 | 220 | .progress-pie-unicorn[data-value="18"] { 221 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 222 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 223 | } 224 | .progress-pie-unicorn[data-value="18"]:before { 225 | -webkit-transform: rotate(0.18turn); 226 | -ms-transform: rotate(0.18turn); 227 | transform: rotate(0.18turn); 228 | } 229 | 230 | .progress-pie-unicorn[data-value="19"] { 231 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 232 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 233 | } 234 | .progress-pie-unicorn[data-value="19"]:before { 235 | -webkit-transform: rotate(0.19turn); 236 | -ms-transform: rotate(0.19turn); 237 | transform: rotate(0.19turn); 238 | } 239 | 240 | .progress-pie-unicorn[data-value="20"] { 241 | background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0); 242 | background-image: linear-gradient(to right, transparent 50%, #78c5d6 0); 243 | } 244 | .progress-pie-unicorn[data-value="20"]:before { 245 | -webkit-transform: rotate(0.2turn); 246 | -ms-transform: rotate(0.2turn); 247 | transform: rotate(0.2turn); 248 | } 249 | 250 | .progress-pie-unicorn[data-value="21"] { 251 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 252 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 253 | } 254 | .progress-pie-unicorn[data-value="21"]:before { 255 | -webkit-transform: rotate(0.21turn); 256 | -ms-transform: rotate(0.21turn); 257 | transform: rotate(0.21turn); 258 | } 259 | 260 | .progress-pie-unicorn[data-value="22"] { 261 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 262 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 263 | } 264 | .progress-pie-unicorn[data-value="22"]:before { 265 | -webkit-transform: rotate(0.22turn); 266 | -ms-transform: rotate(0.22turn); 267 | transform: rotate(0.22turn); 268 | } 269 | 270 | .progress-pie-unicorn[data-value="23"] { 271 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 272 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 273 | } 274 | .progress-pie-unicorn[data-value="23"]:before { 275 | -webkit-transform: rotate(0.23turn); 276 | -ms-transform: rotate(0.23turn); 277 | transform: rotate(0.23turn); 278 | } 279 | 280 | .progress-pie-unicorn[data-value="24"] { 281 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 282 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 283 | } 284 | .progress-pie-unicorn[data-value="24"]:before { 285 | -webkit-transform: rotate(0.24turn); 286 | -ms-transform: rotate(0.24turn); 287 | transform: rotate(0.24turn); 288 | } 289 | 290 | .progress-pie-unicorn[data-value="25"] { 291 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 292 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 293 | } 294 | .progress-pie-unicorn[data-value="25"]:before { 295 | -webkit-transform: rotate(0.25turn); 296 | -ms-transform: rotate(0.25turn); 297 | transform: rotate(0.25turn); 298 | } 299 | 300 | .progress-pie-unicorn[data-value="26"] { 301 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 302 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 303 | } 304 | .progress-pie-unicorn[data-value="26"]:before { 305 | -webkit-transform: rotate(0.26turn); 306 | -ms-transform: rotate(0.26turn); 307 | transform: rotate(0.26turn); 308 | } 309 | 310 | .progress-pie-unicorn[data-value="27"] { 311 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 312 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 313 | } 314 | .progress-pie-unicorn[data-value="27"]:before { 315 | -webkit-transform: rotate(0.27turn); 316 | -ms-transform: rotate(0.27turn); 317 | transform: rotate(0.27turn); 318 | } 319 | 320 | .progress-pie-unicorn[data-value="28"] { 321 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 322 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 323 | } 324 | .progress-pie-unicorn[data-value="28"]:before { 325 | -webkit-transform: rotate(0.28turn); 326 | -ms-transform: rotate(0.28turn); 327 | transform: rotate(0.28turn); 328 | } 329 | 330 | .progress-pie-unicorn[data-value="29"] { 331 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 332 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 333 | } 334 | .progress-pie-unicorn[data-value="29"]:before { 335 | -webkit-transform: rotate(0.29turn); 336 | -ms-transform: rotate(0.29turn); 337 | transform: rotate(0.29turn); 338 | } 339 | 340 | .progress-pie-unicorn[data-value="30"] { 341 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 342 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 343 | } 344 | .progress-pie-unicorn[data-value="30"]:before { 345 | -webkit-transform: rotate(0.3turn); 346 | -ms-transform: rotate(0.3turn); 347 | transform: rotate(0.3turn); 348 | } 349 | 350 | .progress-pie-unicorn[data-value="31"] { 351 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 352 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 353 | } 354 | .progress-pie-unicorn[data-value="31"]:before { 355 | -webkit-transform: rotate(0.31turn); 356 | -ms-transform: rotate(0.31turn); 357 | transform: rotate(0.31turn); 358 | } 359 | 360 | .progress-pie-unicorn[data-value="32"] { 361 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 362 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 363 | } 364 | .progress-pie-unicorn[data-value="32"]:before { 365 | -webkit-transform: rotate(0.32turn); 366 | -ms-transform: rotate(0.32turn); 367 | transform: rotate(0.32turn); 368 | } 369 | 370 | .progress-pie-unicorn[data-value="33"] { 371 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 372 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 373 | } 374 | .progress-pie-unicorn[data-value="33"]:before { 375 | -webkit-transform: rotate(0.33turn); 376 | -ms-transform: rotate(0.33turn); 377 | transform: rotate(0.33turn); 378 | } 379 | 380 | .progress-pie-unicorn[data-value="34"] { 381 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 382 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 383 | } 384 | .progress-pie-unicorn[data-value="34"]:before { 385 | -webkit-transform: rotate(0.34turn); 386 | -ms-transform: rotate(0.34turn); 387 | transform: rotate(0.34turn); 388 | } 389 | 390 | .progress-pie-unicorn[data-value="35"] { 391 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 392 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 393 | } 394 | .progress-pie-unicorn[data-value="35"]:before { 395 | -webkit-transform: rotate(0.35turn); 396 | -ms-transform: rotate(0.35turn); 397 | transform: rotate(0.35turn); 398 | } 399 | 400 | .progress-pie-unicorn[data-value="36"] { 401 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 402 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 403 | } 404 | .progress-pie-unicorn[data-value="36"]:before { 405 | -webkit-transform: rotate(0.36turn); 406 | -ms-transform: rotate(0.36turn); 407 | transform: rotate(0.36turn); 408 | } 409 | 410 | .progress-pie-unicorn[data-value="37"] { 411 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 412 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 413 | } 414 | .progress-pie-unicorn[data-value="37"]:before { 415 | -webkit-transform: rotate(0.37turn); 416 | -ms-transform: rotate(0.37turn); 417 | transform: rotate(0.37turn); 418 | } 419 | 420 | .progress-pie-unicorn[data-value="38"] { 421 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 422 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 423 | } 424 | .progress-pie-unicorn[data-value="38"]:before { 425 | -webkit-transform: rotate(0.38turn); 426 | -ms-transform: rotate(0.38turn); 427 | transform: rotate(0.38turn); 428 | } 429 | 430 | .progress-pie-unicorn[data-value="39"] { 431 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 432 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 433 | } 434 | .progress-pie-unicorn[data-value="39"]:before { 435 | -webkit-transform: rotate(0.39turn); 436 | -ms-transform: rotate(0.39turn); 437 | transform: rotate(0.39turn); 438 | } 439 | 440 | .progress-pie-unicorn[data-value="40"] { 441 | background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0); 442 | background-image: linear-gradient(to right, transparent 50%, #459ba8 0); 443 | } 444 | .progress-pie-unicorn[data-value="40"]:before { 445 | -webkit-transform: rotate(0.4turn); 446 | -ms-transform: rotate(0.4turn); 447 | transform: rotate(0.4turn); 448 | } 449 | 450 | .progress-pie-unicorn[data-value="41"] { 451 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 452 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 453 | } 454 | .progress-pie-unicorn[data-value="41"]:before { 455 | -webkit-transform: rotate(0.41turn); 456 | -ms-transform: rotate(0.41turn); 457 | transform: rotate(0.41turn); 458 | } 459 | 460 | .progress-pie-unicorn[data-value="42"] { 461 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 462 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 463 | } 464 | .progress-pie-unicorn[data-value="42"]:before { 465 | -webkit-transform: rotate(0.42turn); 466 | -ms-transform: rotate(0.42turn); 467 | transform: rotate(0.42turn); 468 | } 469 | 470 | .progress-pie-unicorn[data-value="43"] { 471 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 472 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 473 | } 474 | .progress-pie-unicorn[data-value="43"]:before { 475 | -webkit-transform: rotate(0.43turn); 476 | -ms-transform: rotate(0.43turn); 477 | transform: rotate(0.43turn); 478 | } 479 | 480 | .progress-pie-unicorn[data-value="44"] { 481 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 482 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 483 | } 484 | .progress-pie-unicorn[data-value="44"]:before { 485 | -webkit-transform: rotate(0.44turn); 486 | -ms-transform: rotate(0.44turn); 487 | transform: rotate(0.44turn); 488 | } 489 | 490 | .progress-pie-unicorn[data-value="45"] { 491 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 492 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 493 | } 494 | .progress-pie-unicorn[data-value="45"]:before { 495 | -webkit-transform: rotate(0.45turn); 496 | -ms-transform: rotate(0.45turn); 497 | transform: rotate(0.45turn); 498 | } 499 | 500 | .progress-pie-unicorn[data-value="46"] { 501 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 502 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 503 | } 504 | .progress-pie-unicorn[data-value="46"]:before { 505 | -webkit-transform: rotate(0.46turn); 506 | -ms-transform: rotate(0.46turn); 507 | transform: rotate(0.46turn); 508 | } 509 | 510 | .progress-pie-unicorn[data-value="47"] { 511 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 512 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 513 | } 514 | .progress-pie-unicorn[data-value="47"]:before { 515 | -webkit-transform: rotate(0.47turn); 516 | -ms-transform: rotate(0.47turn); 517 | transform: rotate(0.47turn); 518 | } 519 | 520 | .progress-pie-unicorn[data-value="48"] { 521 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 522 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 523 | } 524 | .progress-pie-unicorn[data-value="48"]:before { 525 | -webkit-transform: rotate(0.48turn); 526 | -ms-transform: rotate(0.48turn); 527 | transform: rotate(0.48turn); 528 | } 529 | 530 | .progress-pie-unicorn[data-value="49"] { 531 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 532 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 533 | } 534 | .progress-pie-unicorn[data-value="49"]:before { 535 | -webkit-transform: rotate(0.49turn); 536 | -ms-transform: rotate(0.49turn); 537 | transform: rotate(0.49turn); 538 | } 539 | 540 | .progress-pie-unicorn[data-value="50"] { 541 | background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0); 542 | background-image: linear-gradient(to right, transparent 50%, #79c267 0); 543 | } 544 | .progress-pie-unicorn[data-value="50"]:before { 545 | -webkit-transform: rotate(0.5turn); 546 | -ms-transform: rotate(0.5turn); 547 | transform: rotate(0.5turn); 548 | } 549 | 550 | .progress-pie-unicorn[data-value="51"] { 551 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 552 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 553 | } 554 | .progress-pie-unicorn[data-value="51"]:before { 555 | background-color: #c5d647; 556 | -webkit-transform: rotate(0.01turn); 557 | -ms-transform: rotate(0.01turn); 558 | transform: rotate(0.01turn); 559 | } 560 | 561 | .progress-pie-unicorn[data-value="52"] { 562 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 563 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 564 | } 565 | .progress-pie-unicorn[data-value="52"]:before { 566 | background-color: #c5d647; 567 | -webkit-transform: rotate(0.02turn); 568 | -ms-transform: rotate(0.02turn); 569 | transform: rotate(0.02turn); 570 | } 571 | 572 | .progress-pie-unicorn[data-value="53"] { 573 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 574 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 575 | } 576 | .progress-pie-unicorn[data-value="53"]:before { 577 | background-color: #c5d647; 578 | -webkit-transform: rotate(0.03turn); 579 | -ms-transform: rotate(0.03turn); 580 | transform: rotate(0.03turn); 581 | } 582 | 583 | .progress-pie-unicorn[data-value="54"] { 584 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 585 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 586 | } 587 | .progress-pie-unicorn[data-value="54"]:before { 588 | background-color: #c5d647; 589 | -webkit-transform: rotate(0.04turn); 590 | -ms-transform: rotate(0.04turn); 591 | transform: rotate(0.04turn); 592 | } 593 | 594 | .progress-pie-unicorn[data-value="55"] { 595 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 596 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 597 | } 598 | .progress-pie-unicorn[data-value="55"]:before { 599 | background-color: #c5d647; 600 | -webkit-transform: rotate(0.05turn); 601 | -ms-transform: rotate(0.05turn); 602 | transform: rotate(0.05turn); 603 | } 604 | 605 | .progress-pie-unicorn[data-value="56"] { 606 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 607 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 608 | } 609 | .progress-pie-unicorn[data-value="56"]:before { 610 | background-color: #c5d647; 611 | -webkit-transform: rotate(0.06turn); 612 | -ms-transform: rotate(0.06turn); 613 | transform: rotate(0.06turn); 614 | } 615 | 616 | .progress-pie-unicorn[data-value="57"] { 617 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 618 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 619 | } 620 | .progress-pie-unicorn[data-value="57"]:before { 621 | background-color: #c5d647; 622 | -webkit-transform: rotate(0.07turn); 623 | -ms-transform: rotate(0.07turn); 624 | transform: rotate(0.07turn); 625 | } 626 | 627 | .progress-pie-unicorn[data-value="58"] { 628 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 629 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 630 | } 631 | .progress-pie-unicorn[data-value="58"]:before { 632 | background-color: #c5d647; 633 | -webkit-transform: rotate(0.08turn); 634 | -ms-transform: rotate(0.08turn); 635 | transform: rotate(0.08turn); 636 | } 637 | 638 | .progress-pie-unicorn[data-value="59"] { 639 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 640 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 641 | } 642 | .progress-pie-unicorn[data-value="59"]:before { 643 | background-color: #c5d647; 644 | -webkit-transform: rotate(0.09turn); 645 | -ms-transform: rotate(0.09turn); 646 | transform: rotate(0.09turn); 647 | } 648 | 649 | .progress-pie-unicorn[data-value="60"] { 650 | background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0); 651 | background-image: linear-gradient(to right, transparent 50%, #c5d647 0); 652 | } 653 | .progress-pie-unicorn[data-value="60"]:before { 654 | background-color: #c5d647; 655 | -webkit-transform: rotate(0.1turn); 656 | -ms-transform: rotate(0.1turn); 657 | transform: rotate(0.1turn); 658 | } 659 | 660 | .progress-pie-unicorn[data-value="61"] { 661 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 662 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 663 | } 664 | .progress-pie-unicorn[data-value="61"]:before { 665 | background-color: #f5d63d; 666 | -webkit-transform: rotate(0.11turn); 667 | -ms-transform: rotate(0.11turn); 668 | transform: rotate(0.11turn); 669 | } 670 | 671 | .progress-pie-unicorn[data-value="62"] { 672 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 673 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 674 | } 675 | .progress-pie-unicorn[data-value="62"]:before { 676 | background-color: #f5d63d; 677 | -webkit-transform: rotate(0.12turn); 678 | -ms-transform: rotate(0.12turn); 679 | transform: rotate(0.12turn); 680 | } 681 | 682 | .progress-pie-unicorn[data-value="63"] { 683 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 684 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 685 | } 686 | .progress-pie-unicorn[data-value="63"]:before { 687 | background-color: #f5d63d; 688 | -webkit-transform: rotate(0.13turn); 689 | -ms-transform: rotate(0.13turn); 690 | transform: rotate(0.13turn); 691 | } 692 | 693 | .progress-pie-unicorn[data-value="64"] { 694 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 695 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 696 | } 697 | .progress-pie-unicorn[data-value="64"]:before { 698 | background-color: #f5d63d; 699 | -webkit-transform: rotate(0.14turn); 700 | -ms-transform: rotate(0.14turn); 701 | transform: rotate(0.14turn); 702 | } 703 | 704 | .progress-pie-unicorn[data-value="65"] { 705 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 706 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 707 | } 708 | .progress-pie-unicorn[data-value="65"]:before { 709 | background-color: #f5d63d; 710 | -webkit-transform: rotate(0.15turn); 711 | -ms-transform: rotate(0.15turn); 712 | transform: rotate(0.15turn); 713 | } 714 | 715 | .progress-pie-unicorn[data-value="66"] { 716 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 717 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 718 | } 719 | .progress-pie-unicorn[data-value="66"]:before { 720 | background-color: #f5d63d; 721 | -webkit-transform: rotate(0.16turn); 722 | -ms-transform: rotate(0.16turn); 723 | transform: rotate(0.16turn); 724 | } 725 | 726 | .progress-pie-unicorn[data-value="67"] { 727 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 728 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 729 | } 730 | .progress-pie-unicorn[data-value="67"]:before { 731 | background-color: #f5d63d; 732 | -webkit-transform: rotate(0.17turn); 733 | -ms-transform: rotate(0.17turn); 734 | transform: rotate(0.17turn); 735 | } 736 | 737 | .progress-pie-unicorn[data-value="68"] { 738 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 739 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 740 | } 741 | .progress-pie-unicorn[data-value="68"]:before { 742 | background-color: #f5d63d; 743 | -webkit-transform: rotate(0.18turn); 744 | -ms-transform: rotate(0.18turn); 745 | transform: rotate(0.18turn); 746 | } 747 | 748 | .progress-pie-unicorn[data-value="69"] { 749 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 750 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 751 | } 752 | .progress-pie-unicorn[data-value="69"]:before { 753 | background-color: #f5d63d; 754 | -webkit-transform: rotate(0.19turn); 755 | -ms-transform: rotate(0.19turn); 756 | transform: rotate(0.19turn); 757 | } 758 | 759 | .progress-pie-unicorn[data-value="70"] { 760 | background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0); 761 | background-image: linear-gradient(to right, transparent 50%, #f5d63d 0); 762 | } 763 | .progress-pie-unicorn[data-value="70"]:before { 764 | background-color: #f5d63d; 765 | -webkit-transform: rotate(0.2turn); 766 | -ms-transform: rotate(0.2turn); 767 | transform: rotate(0.2turn); 768 | } 769 | 770 | .progress-pie-unicorn[data-value="71"] { 771 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 772 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 773 | } 774 | .progress-pie-unicorn[data-value="71"]:before { 775 | background-color: #f28c33; 776 | -webkit-transform: rotate(0.21turn); 777 | -ms-transform: rotate(0.21turn); 778 | transform: rotate(0.21turn); 779 | } 780 | 781 | .progress-pie-unicorn[data-value="72"] { 782 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 783 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 784 | } 785 | .progress-pie-unicorn[data-value="72"]:before { 786 | background-color: #f28c33; 787 | -webkit-transform: rotate(0.22turn); 788 | -ms-transform: rotate(0.22turn); 789 | transform: rotate(0.22turn); 790 | } 791 | 792 | .progress-pie-unicorn[data-value="73"] { 793 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 794 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 795 | } 796 | .progress-pie-unicorn[data-value="73"]:before { 797 | background-color: #f28c33; 798 | -webkit-transform: rotate(0.23turn); 799 | -ms-transform: rotate(0.23turn); 800 | transform: rotate(0.23turn); 801 | } 802 | 803 | .progress-pie-unicorn[data-value="74"] { 804 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 805 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 806 | } 807 | .progress-pie-unicorn[data-value="74"]:before { 808 | background-color: #f28c33; 809 | -webkit-transform: rotate(0.24turn); 810 | -ms-transform: rotate(0.24turn); 811 | transform: rotate(0.24turn); 812 | } 813 | 814 | .progress-pie-unicorn[data-value="75"] { 815 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 816 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 817 | } 818 | .progress-pie-unicorn[data-value="75"]:before { 819 | background-color: #f28c33; 820 | -webkit-transform: rotate(0.25turn); 821 | -ms-transform: rotate(0.25turn); 822 | transform: rotate(0.25turn); 823 | } 824 | 825 | .progress-pie-unicorn[data-value="76"] { 826 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 827 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 828 | } 829 | .progress-pie-unicorn[data-value="76"]:before { 830 | background-color: #f28c33; 831 | -webkit-transform: rotate(0.26turn); 832 | -ms-transform: rotate(0.26turn); 833 | transform: rotate(0.26turn); 834 | } 835 | 836 | .progress-pie-unicorn[data-value="77"] { 837 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 838 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 839 | } 840 | .progress-pie-unicorn[data-value="77"]:before { 841 | background-color: #f28c33; 842 | -webkit-transform: rotate(0.27turn); 843 | -ms-transform: rotate(0.27turn); 844 | transform: rotate(0.27turn); 845 | } 846 | 847 | .progress-pie-unicorn[data-value="78"] { 848 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 849 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 850 | } 851 | .progress-pie-unicorn[data-value="78"]:before { 852 | background-color: #f28c33; 853 | -webkit-transform: rotate(0.28turn); 854 | -ms-transform: rotate(0.28turn); 855 | transform: rotate(0.28turn); 856 | } 857 | 858 | .progress-pie-unicorn[data-value="79"] { 859 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 860 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 861 | } 862 | .progress-pie-unicorn[data-value="79"]:before { 863 | background-color: #f28c33; 864 | -webkit-transform: rotate(0.29turn); 865 | -ms-transform: rotate(0.29turn); 866 | transform: rotate(0.29turn); 867 | } 868 | 869 | .progress-pie-unicorn[data-value="80"] { 870 | background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0); 871 | background-image: linear-gradient(to right, transparent 50%, #f28c33 0); 872 | } 873 | .progress-pie-unicorn[data-value="80"]:before { 874 | background-color: #f28c33; 875 | -webkit-transform: rotate(0.3turn); 876 | -ms-transform: rotate(0.3turn); 877 | transform: rotate(0.3turn); 878 | } 879 | 880 | .progress-pie-unicorn[data-value="81"] { 881 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 882 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 883 | } 884 | .progress-pie-unicorn[data-value="81"]:before { 885 | background-color: #e868a2; 886 | -webkit-transform: rotate(0.31turn); 887 | -ms-transform: rotate(0.31turn); 888 | transform: rotate(0.31turn); 889 | } 890 | 891 | .progress-pie-unicorn[data-value="82"] { 892 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 893 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 894 | } 895 | .progress-pie-unicorn[data-value="82"]:before { 896 | background-color: #e868a2; 897 | -webkit-transform: rotate(0.32turn); 898 | -ms-transform: rotate(0.32turn); 899 | transform: rotate(0.32turn); 900 | } 901 | 902 | .progress-pie-unicorn[data-value="83"] { 903 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 904 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 905 | } 906 | .progress-pie-unicorn[data-value="83"]:before { 907 | background-color: #e868a2; 908 | -webkit-transform: rotate(0.33turn); 909 | -ms-transform: rotate(0.33turn); 910 | transform: rotate(0.33turn); 911 | } 912 | 913 | .progress-pie-unicorn[data-value="84"] { 914 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 915 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 916 | } 917 | .progress-pie-unicorn[data-value="84"]:before { 918 | background-color: #e868a2; 919 | -webkit-transform: rotate(0.34turn); 920 | -ms-transform: rotate(0.34turn); 921 | transform: rotate(0.34turn); 922 | } 923 | 924 | .progress-pie-unicorn[data-value="85"] { 925 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 926 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 927 | } 928 | .progress-pie-unicorn[data-value="85"]:before { 929 | background-color: #e868a2; 930 | -webkit-transform: rotate(0.35turn); 931 | -ms-transform: rotate(0.35turn); 932 | transform: rotate(0.35turn); 933 | } 934 | 935 | .progress-pie-unicorn[data-value="86"] { 936 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 937 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 938 | } 939 | .progress-pie-unicorn[data-value="86"]:before { 940 | background-color: #e868a2; 941 | -webkit-transform: rotate(0.36turn); 942 | -ms-transform: rotate(0.36turn); 943 | transform: rotate(0.36turn); 944 | } 945 | 946 | .progress-pie-unicorn[data-value="87"] { 947 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 948 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 949 | } 950 | .progress-pie-unicorn[data-value="87"]:before { 951 | background-color: #e868a2; 952 | -webkit-transform: rotate(0.37turn); 953 | -ms-transform: rotate(0.37turn); 954 | transform: rotate(0.37turn); 955 | } 956 | 957 | .progress-pie-unicorn[data-value="88"] { 958 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 959 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 960 | } 961 | .progress-pie-unicorn[data-value="88"]:before { 962 | background-color: #e868a2; 963 | -webkit-transform: rotate(0.38turn); 964 | -ms-transform: rotate(0.38turn); 965 | transform: rotate(0.38turn); 966 | } 967 | 968 | .progress-pie-unicorn[data-value="89"] { 969 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 970 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 971 | } 972 | .progress-pie-unicorn[data-value="89"]:before { 973 | background-color: #e868a2; 974 | -webkit-transform: rotate(0.39turn); 975 | -ms-transform: rotate(0.39turn); 976 | transform: rotate(0.39turn); 977 | } 978 | 979 | .progress-pie-unicorn[data-value="90"] { 980 | background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0); 981 | background-image: linear-gradient(to right, transparent 50%, #e868a2 0); 982 | } 983 | .progress-pie-unicorn[data-value="90"]:before { 984 | background-color: #e868a2; 985 | -webkit-transform: rotate(0.4turn); 986 | -ms-transform: rotate(0.4turn); 987 | transform: rotate(0.4turn); 988 | } 989 | 990 | .progress-pie-unicorn[data-value="91"] { 991 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 992 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 993 | } 994 | .progress-pie-unicorn[data-value="91"]:before { 995 | background-color: #bf62a6; 996 | -webkit-transform: rotate(0.41turn); 997 | -ms-transform: rotate(0.41turn); 998 | transform: rotate(0.41turn); 999 | } 1000 | 1001 | .progress-pie-unicorn[data-value="92"] { 1002 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1003 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1004 | } 1005 | .progress-pie-unicorn[data-value="92"]:before { 1006 | background-color: #bf62a6; 1007 | -webkit-transform: rotate(0.42turn); 1008 | -ms-transform: rotate(0.42turn); 1009 | transform: rotate(0.42turn); 1010 | } 1011 | 1012 | .progress-pie-unicorn[data-value="93"] { 1013 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1014 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1015 | } 1016 | .progress-pie-unicorn[data-value="93"]:before { 1017 | background-color: #bf62a6; 1018 | -webkit-transform: rotate(0.43turn); 1019 | -ms-transform: rotate(0.43turn); 1020 | transform: rotate(0.43turn); 1021 | } 1022 | 1023 | .progress-pie-unicorn[data-value="94"] { 1024 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1025 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1026 | } 1027 | .progress-pie-unicorn[data-value="94"]:before { 1028 | background-color: #bf62a6; 1029 | -webkit-transform: rotate(0.44turn); 1030 | -ms-transform: rotate(0.44turn); 1031 | transform: rotate(0.44turn); 1032 | } 1033 | 1034 | .progress-pie-unicorn[data-value="95"] { 1035 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1036 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1037 | } 1038 | .progress-pie-unicorn[data-value="95"]:before { 1039 | background-color: #bf62a6; 1040 | -webkit-transform: rotate(0.45turn); 1041 | -ms-transform: rotate(0.45turn); 1042 | transform: rotate(0.45turn); 1043 | } 1044 | 1045 | .progress-pie-unicorn[data-value="96"] { 1046 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1047 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1048 | } 1049 | .progress-pie-unicorn[data-value="96"]:before { 1050 | background-color: #bf62a6; 1051 | -webkit-transform: rotate(0.46turn); 1052 | -ms-transform: rotate(0.46turn); 1053 | transform: rotate(0.46turn); 1054 | } 1055 | 1056 | .progress-pie-unicorn[data-value="97"] { 1057 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1058 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1059 | } 1060 | .progress-pie-unicorn[data-value="97"]:before { 1061 | background-color: #bf62a6; 1062 | -webkit-transform: rotate(0.47turn); 1063 | -ms-transform: rotate(0.47turn); 1064 | transform: rotate(0.47turn); 1065 | } 1066 | 1067 | .progress-pie-unicorn[data-value="98"] { 1068 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1069 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1070 | } 1071 | .progress-pie-unicorn[data-value="98"]:before { 1072 | background-color: #bf62a6; 1073 | -webkit-transform: rotate(0.48turn); 1074 | -ms-transform: rotate(0.48turn); 1075 | transform: rotate(0.48turn); 1076 | } 1077 | 1078 | .progress-pie-unicorn[data-value="99"] { 1079 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1080 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1081 | } 1082 | .progress-pie-unicorn[data-value="99"]:before { 1083 | background-color: #bf62a6; 1084 | -webkit-transform: rotate(0.49turn); 1085 | -ms-transform: rotate(0.49turn); 1086 | transform: rotate(0.49turn); 1087 | } 1088 | 1089 | .progress-pie-unicorn[data-value="100"] { 1090 | background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0); 1091 | background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); 1092 | } 1093 | .progress-pie-unicorn[data-value="100"]:before { 1094 | background-color: #bf62a6; 1095 | -webkit-transform: rotate(0.5turn); 1096 | -ms-transform: rotate(0.5turn); 1097 | transform: rotate(0.5turn); 1098 | } 1099 | 1100 | .hello { 1101 | box-shadow: 0 1px 1px rgba(0,0,0,0.4); 1102 | } --------------------------------------------------------------------------------