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

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

Issue 2535493002: Reduce webkit CSS prefixes in ui/ styles (Closed)
Patch Set: bluetooth_internals/snackbar.js Created 3 years, 10 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 20 matching lines...) Expand all
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 @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-name: rotate;
51 -webkit-animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ 51 animation-duration: 1568.63ms; /* 360 * ARCTIME / (ARCSTARTROT + (360-AR CSIZE)) */
52 -webkit-animation-iteration-count: infinite; 52 animation-iteration-count: infinite;
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-name: fillunfill, rot, colors;
88 -webkit-animation-duration: 1333ms, 5332ms, 5332ms; /* ARCTIME, 4*ARCTIM E, 4*ARCTIME */ 88 animation-duration: 1333ms, 5332ms, 5332ms; /* ARCTIME, 4*ARCTIME, 4*ARC TIME */
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-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), steps(4), lin ear;
91 -webkit-animation-play-state: running, running, running; 91 animation-play-state: running, running, running;
92 -webkit-animation-fill-mode: forwards; 92 animation-fill-mode: forwards;
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>
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