Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(19)

Side by Side Diff: ui/webui/resources/images/throbber_medium.svg

Issue 1549903002: Replace -webkit-transform with transform in Chrome UI (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase CL Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « ui/webui/resources/css/tree.css ('k') | ui/webui/resources/images/throbber_small.svg » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!-- This version of the throbber is good for size 28x28dp or more. --> 1 <!-- This version of the throbber is good for size 28x28dp or more. -->
2 <svg version="1" xmlns="http://www.w3.org/2000/svg" 2 <svg version="1" xmlns="http://www.w3.org/2000/svg"
3 xmlns:xlink="http://www.w3.org/1999/xlink" 3 xmlns:xlink="http://www.w3.org/1999/xlink"
4 viewBox="0 0 28 28"> 4 viewBox="0 0 28 28">
5 <!-- 28= RADIUS*2 + STROKEWIDTH --> 5 <!-- 28= RADIUS*2 + STROKEWIDTH -->
6 6
7 <title>Material design circular activity spinner with CSS3 animation</title> 7 <title>Material design circular activity spinner with CSS3 animation</title>
8 <style type="text/css"> 8 <style type="text/css">
9 /**************************/ 9 /**************************/
10 /* STYLES FOR THE SPINNER */ 10 /* STYLES FOR THE SPINNER */
(...skipping 24 matching lines...) Expand all
35 /* hides things initially */ 35 /* hides things initially */
36 } 36 }
37 37
38 /* SVG elements seem to have a different default origin */ 38 /* SVG elements seem to have a different default origin */
39 .qp-circular-loader, .qp-circular-loader * { 39 .qp-circular-loader, .qp-circular-loader * {
40 -webkit-transform-origin: 50% 50%; 40 -webkit-transform-origin: 50% 50%;
41 } 41 }
42 42
43 /* Rotating the whole thing */ 43 /* Rotating the whole thing */
44 @-webkit-keyframes rotate { 44 @-webkit-keyframes rotate {
45 from {-webkit-transform: rotate(0deg);} 45 from {transform: rotate(0deg);}
46 to {-webkit-transform: rotate(360deg);} 46 to {transform: rotate(360deg);}
47 } 47 }
48 .qp-circular-loader { 48 .qp-circular-loader {
49 -webkit-animation-name: rotate; 49 -webkit-animation-name: rotate;
50 -webkit-animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ 50 -webkit-animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
51 -webkit-animation-iteration-count: infinite; 51 -webkit-animation-iteration-count: infinite;
52 -webkit-animation-timing-function: linear; 52 -webkit-animation-timing-function: linear;
53 } 53 }
54 54
55 /* Filling and unfilling the arc */ 55 /* Filling and unfilling the arc */
56 @-webkit-keyframes fillunfill { 56 @-webkit-keyframes fillunfill {
57 from { 57 from {
58 stroke-dashoffset: 58.8 /* 2*RADIUS*PI * ARCSIZE/360 - 0.1 */ 58 stroke-dashoffset: 58.8 /* 2*RADIUS*PI * ARCSIZE/360 - 0.1 */
59 /* 0.1 a bit of a magic constant here */ 59 /* 0.1 a bit of a magic constant here */
60 } 60 }
61 50% { 61 50% {
62 stroke-dashoffset: 0; 62 stroke-dashoffset: 0;
63 } 63 }
64 to { 64 to {
65 stroke-dashoffset: -58.4 /* -(2*RADIUS*PI * ARCSIZE/360 - 0.5) */ 65 stroke-dashoffset: -58.4 /* -(2*RADIUS*PI * ARCSIZE/360 - 0.5) */
66 /* 0.5 a bit of a magic constant here */ 66 /* 0.5 a bit of a magic constant here */
67 } 67 }
68 } 68 }
69 @-webkit-keyframes rot { 69 @-webkit-keyframes rot {
70 from { 70 from {
71 -webkit-transform: rotate(0deg); 71 transform: rotate(0deg);
72 } 72 }
73 to { 73 to {
74 -webkit-transform: rotate(-360deg); 74 transform: rotate(-360deg);
75 } 75 }
76 } 76 }
77 @-webkit-keyframes colors { 77 @-webkit-keyframes colors {
78 from { 78 from {
79 stroke: #4285f4; 79 stroke: #4285f4;
80 } 80 }
81 to { 81 to {
82 stroke: #4285f4; 82 stroke: #4285f4;
83 } 83 }
84 } 84 }
(...skipping 13 matching lines...) Expand all
98 <!-- 12.5= RADIUS --> 98 <!-- 12.5= RADIUS -->
99 <!-- 1.5= STROKEWIDTH/2 --> 99 <!-- 1.5= STROKEWIDTH/2 -->
100 <!-- ARCSIZE would affect the 1.5,14 part of this... 1.5,14 is specific to 100 <!-- ARCSIZE would affect the 1.5,14 part of this... 1.5,14 is specific to
101 270 degress --> 101 270 degress -->
102 <g class="qp-circular-loader"> 102 <g class="qp-circular-loader">
103 <path class="qp-circular-loader-path" fill="none" 103 <path class="qp-circular-loader-path" fill="none"
104 d="M 14,1.5 A 12.5,12.5 0 1 1 1.5,14" stroke-width="3" 104 d="M 14,1.5 A 12.5,12.5 0 1 1 1.5,14" stroke-width="3"
105 stroke-linecap="round"></path> 105 stroke-linecap="round"></path>
106 </g> 106 </g>
107 </svg> 107 </svg>
OLDNEW
« no previous file with comments | « ui/webui/resources/css/tree.css ('k') | ui/webui/resources/images/throbber_small.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698