| 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 |