From cb7a6e502f63af5296250624743e16b54ee33c65 Mon Sep 17 00:00:00 2001 From: oliviale Date: Sun, 11 Jun 2017 15:54:29 +0800 Subject: [PATCH] index page up --- favicon.png | Bin 0 -> 4162 bytes index.html | 735 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 735 insertions(+) create mode 100644 favicon.png create mode 100644 index.html diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..8f361e98ea6b369e64b01c0e53d4af5e8ecb3c16 GIT binary patch literal 4162 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 M4bJI5(Q~={KOUuB!vFvP literal 0 HcmV?d00001 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