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 25 matching lines...) Expand all Loading... |
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 -webkit-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 {-webkit-transform: rotate(0deg);} | 46 from {transform: rotate(0deg);} |
47 to {-webkit-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)) */ |
52 -webkit-animation-iteration-count: infinite; | 52 -webkit-animation-iteration-count: infinite; |
53 -webkit-animation-timing-function: linear; | 53 -webkit-animation-timing-function: linear; |
54 } | 54 } |
55 | 55 |
56 /* Filling and unfilling the arc */ | 56 /* Filling and unfilling the arc */ |
57 @-webkit-keyframes fillunfill { | 57 @-webkit-keyframes fillunfill { |
58 from { | 58 from { |
59 stroke-dashoffset: 32.3 /* 2*RADIUS*PI * ARCSIZE/360 - 0.1 */ | 59 stroke-dashoffset: 32.3 /* 2*RADIUS*PI * ARCSIZE/360 - 0.1 */ |
60 /* 0.1 a bit of a magic constant here */ | 60 /* 0.1 a bit of a magic constant here */ |
61 } | 61 } |
62 50% { | 62 50% { |
63 stroke-dashoffset: 0; | 63 stroke-dashoffset: 0; |
64 } | 64 } |
65 to { | 65 to { |
66 stroke-dashoffset: -31.9 /* -(2*RADIUS*PI * ARCSIZE/360 - 0.5) */ | 66 stroke-dashoffset: -31.9 /* -(2*RADIUS*PI * ARCSIZE/360 - 0.5) */ |
67 /* 0.5 a bit of a magic constant here */ | 67 /* 0.5 a bit of a magic constant here */ |
68 } | 68 } |
69 } | 69 } |
70 @-webkit-keyframes rot { | 70 @-webkit-keyframes rot { |
71 from { | 71 from { |
72 -webkit-transform: rotate(0deg); | 72 transform: rotate(0deg); |
73 } | 73 } |
74 to { | 74 to { |
75 -webkit-transform: rotate(-360deg); | 75 transform: rotate(-360deg); |
76 } | 76 } |
77 } | 77 } |
78 @-webkit-keyframes colors { | 78 @-webkit-keyframes colors { |
79 from { | 79 from { |
80 stroke: #4285f4; | 80 stroke: #4285f4; |
81 } | 81 } |
82 to { | 82 to { |
83 stroke: #4285f4; | 83 stroke: #4285f4; |
84 } | 84 } |
85 } | 85 } |
(...skipping 11 matching lines...) Expand all 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 |