| 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 24 matching lines...) Expand all Loading... |
| 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 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 @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 animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT + (360-AR
CSIZE)) */ |
| 51 -webkit-animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT +
(360-ARCSIZE)) */ | 51 animation-iteration-count: infinite; |
| 52 -webkit-animation-iteration-count: infinite; | 52 animation-name: rotate; |
| 53 -webkit-animation-timing-function: linear; | 53 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 @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 @keyframes rot { |
| 71 from { | 71 from { |
| 72 transform: rotate(0deg); | 72 transform: rotate(0deg); |
| 73 } | 73 } |
| 74 to { | 74 to { |
| 75 transform: rotate(-360deg); | 75 transform: rotate(-360deg); |
| 76 } | 76 } |
| 77 } | 77 } |
| 78 @-webkit-keyframes colors { | 78 @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 } |
| 86 .qp-circular-loader-path { | 86 .qp-circular-loader-path { |
| 87 -webkit-animation-name: fillunfill, rot, colors; | 87 animation-duration: 1333ms, 5332ms, 5332ms; /* ARCTIME, 4*ARCTIME, 4*ARC
TIME */ |
| 88 -webkit-animation-duration: 1333ms, 5332ms, 5332ms; /* ARCTIME, 4*ARCTIM
E, 4*ARCTIME */ | 88 animation-fill-mode: forwards; |
| 89 -webkit-animation-iteration-count: infinite, infinite, infinite; | 89 animation-iteration-count: infinite, infinite, infinite; |
| 90 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), steps
(4), linear; | 90 animation-name: fillunfill, rot, colors; |
| 91 -webkit-animation-play-state: running, running, running; | 91 animation-play-state: running, running, running; |
| 92 -webkit-animation-fill-mode: forwards; | 92 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), steps(4), lin
ear; |
| 93 } | 93 } |
| 94 | 94 |
| 95 </style> | 95 </style> |
| 96 | 96 |
| 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 |