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

Side by Side Diff: ui/webui/resources/images/throbber_small.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
OLDNEW
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
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
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>
OLDNEW
« no previous file with comments | « ui/webui/resources/images/throbber_medium.svg ('k') | ui/webui/resources/js/cr/ui/card_slider.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698