OLD | NEW |
1 <!-- This version of the throbber is good for sizes less than 28x28dp, | 1 <!-- This version of the throbber is good for sizes less than 28x28dp, |
2 which follow the stroke thickness calculation: 3 - (28 - diameter) / 16 --> | 2 which follow the stroke thickness calculation: 3 - (28 - diameter) / 16 --> |
3 <svg version="1" xmlns="http://www.w3.org/2000/svg" | 3 <svg version="1" xmlns="http://www.w3.org/2000/svg" |
4 xmlns:xlink="http://www.w3.org/1999/xlink" | 4 xmlns:xlink="http://www.w3.org/1999/xlink" |
5 width="16px" height="16px" viewBox="0 0 16 16"> | 5 width="16px" height="16px" viewBox="0 0 16 16"> |
6 <!-- 16= RADIUS*2 + STROKEWIDTH --> | 6 <!-- 16= RADIUS*2 + STROKEWIDTH --> |
7 | 7 |
8 <title>Material design circular activity spinner with CSS3 animation</title> | 8 <title>Material design circular activity spinner with CSS3 animation</title> |
9 <style type="text/css"> | 9 <style type="text/css"> |
10 /**************************/ | 10 /**************************/ |
(...skipping 20 matching lines...) Expand all Loading... |
31 height:16px; /* 2*RADIUS + STROKEWIDTH */ | 31 height:16px; /* 2*RADIUS + STROKEWIDTH */ |
32 } | 32 } |
33 .qp-circular-loader-path { | 33 .qp-circular-loader-path { |
34 stroke-dasharray: 32.4; /* 2*RADIUS*PI * ARCSIZE/360 */ | 34 stroke-dasharray: 32.4; /* 2*RADIUS*PI * ARCSIZE/360 */ |
35 stroke-dashoffset: 32.4; /* 2*RADIUS*PI * ARCSIZE/360 */ | 35 stroke-dashoffset: 32.4; /* 2*RADIUS*PI * ARCSIZE/360 */ |
36 /* hides things initially */ | 36 /* hides things initially */ |
37 } | 37 } |
38 | 38 |
39 /* SVG elements seem to have a different default origin */ | 39 /* SVG elements seem to have a different default origin */ |
40 .qp-circular-loader, .qp-circular-loader * { | 40 .qp-circular-loader, .qp-circular-loader * { |
41 -webkit-transform-origin: 50% 50%; | 41 transform-origin: 50% 50%; |
42 } | 42 } |
43 | 43 |
44 /* Rotating the whole thing */ | 44 /* Rotating the whole thing */ |
45 @-webkit-keyframes rotate { | 45 @-webkit-keyframes rotate { |
46 from {transform: rotate(0deg);} | 46 from {transform: rotate(0deg);} |
47 to {transform: rotate(360deg);} | 47 to {transform: rotate(360deg);} |
48 } | 48 } |
49 .qp-circular-loader { | 49 .qp-circular-loader { |
50 -webkit-animation-name: rotate; | 50 -webkit-animation-name: rotate; |
51 -webkit-animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT +
(360-ARCSIZE)) */ | 51 -webkit-animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT +
(360-ARCSIZE)) */ |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
97 <!-- 2.25= STROKEWIDTH --> | 97 <!-- 2.25= STROKEWIDTH --> |
98 <!-- 8 = RADIUS + STROKEWIDTH/2 --> | 98 <!-- 8 = RADIUS + STROKEWIDTH/2 --> |
99 <!-- 6.875= RADIUS --> | 99 <!-- 6.875= RADIUS --> |
100 <!-- 1.125= STROKEWIDTH/2 --> | 100 <!-- 1.125= STROKEWIDTH/2 --> |
101 <g class="qp-circular-loader"> | 101 <g class="qp-circular-loader"> |
102 <path class="qp-circular-loader-path" fill="none" | 102 <path class="qp-circular-loader-path" fill="none" |
103 d="M 8,1.125 A 6.875,6.875 0 1 1 1.125,8" stroke-width="2.25" | 103 d="M 8,1.125 A 6.875,6.875 0 1 1 1.125,8" stroke-width="2.25" |
104 stroke-linecap="round"></path> | 104 stroke-linecap="round"></path> |
105 </g> | 105 </g> |
106 </svg> | 106 </svg> |
OLD | NEW |