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

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

Issue 2535493002: Reduce webkit CSS prefixes in ui/ styles (Closed)
Patch Set: sort Created 4 years 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
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 19 matching lines...) Expand all
30 height:28px; /* 2*RADIUS + STROKEWIDTH */ 30 height:28px; /* 2*RADIUS + STROKEWIDTH */
31 } 31 }
32 .qp-circular-loader-path { 32 .qp-circular-loader-path {
33 stroke-dasharray: 58.9; /* 2*RADIUS*PI * ARCSIZE/360 */ 33 stroke-dasharray: 58.9; /* 2*RADIUS*PI * ARCSIZE/360 */
34 stroke-dashoffset: 58.9; /* 2*RADIUS*PI * ARCSIZE/360 */ 34 stroke-dashoffset: 58.9; /* 2*RADIUS*PI * ARCSIZE/360 */
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 transform-origin: 50% 50%;
41 } 41 }
42 42
43 /* Rotating the whole thing */ 43 /* Rotating the whole thing */
44 @-webkit-keyframes rotate { 44 @keyframes rotate {
45 from {transform: rotate(0deg);} 45 from {transform: rotate(0deg);}
46 to {transform: rotate(360deg);} 46 to {transform: rotate(360deg);}
47 } 47 }
48 .qp-circular-loader { 48 .qp-circular-loader {
49 -webkit-animation-name: rotate; 49 animation-name: rotate;
50 -webkit-animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ 50 animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT + (360-AR CSIZE)) */
51 -webkit-animation-iteration-count: infinite; 51 animation-iteration-count: infinite;
52 -webkit-animation-timing-function: linear; 52 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 @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 @keyframes rot {
70 from { 70 from {
71 transform: rotate(0deg); 71 transform: rotate(0deg);
72 } 72 }
73 to { 73 to {
74 transform: rotate(-360deg); 74 transform: rotate(-360deg);
75 } 75 }
76 } 76 }
77 @-webkit-keyframes colors { 77 @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 }
85 .qp-circular-loader-path { 85 .qp-circular-loader-path {
86 -webkit-animation-name: fillunfill, rot, colors; 86 animation-name: fillunfill, rot, colors;
87 -webkit-animation-duration: 1333ms, 5332ms, 5332ms; /* ARCTIME, 4*ARCTIM E, 4*ARCTIME */ 87 animation-duration: 1333ms, 5332ms, 5332ms; /* ARCTIME, 4*ARCTIME, 4*ARC TIME */
88 -webkit-animation-iteration-count: infinite, infinite, infinite; 88 animation-iteration-count: infinite, infinite, infinite;
89 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), steps (4), linear; 89 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), steps(4), lin ear;
90 -webkit-animation-play-state: running, running, running; 90 animation-play-state: running, running, running;
91 -webkit-animation-fill-mode: forwards; 91 animation-fill-mode: forwards;
92 } 92 }
93 93
94 </style> 94 </style>
95 95
96 <!-- 3= STROKEWIDTH --> 96 <!-- 3= STROKEWIDTH -->
97 <!-- 14= RADIUS + STROKEWIDTH/2 --> 97 <!-- 14= RADIUS + STROKEWIDTH/2 -->
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

Powered by Google App Engine
This is Rietveld 408576698