diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..8f361e9 Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..de7bc37 --- /dev/null +++ b/index.html @@ -0,0 +1,735 @@ + + + + + + CSS Progress Pie by oliviale + + + + + + + + + + + + + +
+

CSS Progress Pie

+ +
+

Default

+
+
+ HTML: + + <div + class="progress-pie" + data-value="93"></div> + +
+
+
+
+
+
+ +
+

Colored

+

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

+
+
+ HTML: + + <div + class="progress-pie-color" + data-value="22"></div> + +
+
+
+
+
+
+
+ HTML: + + <div + class="progress-pie-color" + data-value="55"></div> + +
+
+
+
+
+
+
+ HTML: + + <div + class="progress-pie-color" + data-value="93"></div> + +
+
+
+
+
+
+ +
+

Use Cases

+
+
+
+
A Fancy To-Do List
+
+
+
Finish this page
+ You're almost there! +
+
+
+
Tea time: Chocolate cake & green tea latte
+ Halfway through... +
+
+
+
Check #Slack Messages
+ Slow progress. Have you been slacking? Ha-ha. Get it? +
+
+
+
+
+
+
+
% Complete
+

Keep going...

+
+
+

Answer the question below truthfully.

+
Which was your starter Pokemon?
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

Meme Skills

+
+
+ Understanding +
+
+
+ Integrating +
+
+
+ Making +
+
+
+ Dreaming +
+
+
+
+
+
+ +
+

Styling

+
+
+
Color
+

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.

+
+
+
+
+
+
+
+
+ SCSS: + .progress-pie { + background-image: linear-gradient(to right, transparent 50%, #bf62a6 0); +} + +@for $i from 51 through 100 { + .progress-pie[data-value="#{$i}"]:before { + background-color: #bf62a6; + } +} +
+
+ +
+
+
Color of passive ring
+

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

+
+
+
+
+
+ CSS: + .progress-pie-unicorn.dark-ring { + background-color: #222; +} + +// white-ring with box shadow +.progress-pie.gray-ring { + background-color: #fff; + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); +} +.progress-pie.gray-ring:after { + box-shadow: inset 1px 0px 3px rgba(0,0,0,0.3); +} +
+
+ +
+ +
+
Inner background, font and color of text
+

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

+
+
+
+
+
+
+
+
+ CSS: + .progress-pie.dark-theme:after { + background: #111; + color: #ffcf3a; +} + +// changing font +.progress-pie.normal-theme:after { + font: 700 26px/42px 'Palatino', serif; +} + +// using a transparent background works +.progress-pie.transparent:after { + background: transparent; +} +
+
+ +
+
+
Size of pie
+

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

+

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

+
+
+
+
+
+
+ CSS: + .progress-pie.large { + width: 90px; + height: 90px; +} + +.progress-pie.small { + width: 40px; + height: 40px; +} +
+
+ +
+
+
Size of ring
+

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

+

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

+
+
+
+
+
+
+ CSS: + .progress-pie.thick:after { + width: 45%; + height: 45%; +} + +.progress-pie.thin:after { + width: 90%; + height: 90%; +} +
+
+ +
+
+
+ +
+ \ No newline at end of file