forked from Identified/sham-spinner
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsham-spinner.scss
107 lines (91 loc) · 27.3 KB
/
sham-spinner.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// Properties common to all spinners
%spinner-properties {
background-repeat : no-repeat;
background-position : center center;
-moz-animation : sham-spin infinite linear ;
-moz-transform-origin : 50% 50%;
-webkit-animation : sham-spin infinite linear ;
-webkit-transform-origin : 50% 50%;
-o-animation : sham-spin infinite linear ;
-o-transform-origin : 50% 50%;
animation : sham-spin infinite linear ;
transform-origin : 50% 50%;
}
// Mixins for various spinner types
@mixin sham-spinner-circular-fading($color, $size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='#{$size}' height='#{$size}' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><path opacity='0.4' fill='#{$color}' d='M23.656,9.041c1.568,1.725,2.56,3.978,2.677,6.465H32c-0.123-4.049-1.747-7.718-4.338-10.472 L23.656,9.041z'/><path fill='#{$color}' d='M15.507,5.667V0c-4.049,0.122-7.72,1.747-10.473,4.337l4.007,4.006C10.767,6.774,13.02,5.784,15.507,5.667z'/><path opacity='0.5' fill='#{$color}' d='M27.662,26.966c2.591-2.755,4.215-6.424,4.338-10.474h-5.667 c-0.117,2.488-1.108,4.74-2.677,6.466L27.662,26.966z'/><path opacity='0.3' fill='#{$color}' d='M22.959,8.344l4.007-4.006C24.213,1.747,20.543,0.122,16.494,0l-0.001,5.667 C18.98,5.784,21.233,6.774,22.959,8.344z'/><path opacity='0.7' fill='#{$color}' d='M9.041,23.655l-4.007,4.007c2.753,2.591,6.424,4.215,10.473,4.338v-5.667 C13.02,26.216,10.767,25.225,9.041,23.655z'/><path opacity='0.6' fill='#{$color}' d='M16.493,26.333L16.494,32c4.049-0.123,7.719-1.747,10.472-4.338l-4.007-4.007 C21.233,25.225,18.98,26.216,16.493,26.333z'/> <path opacity='0.8' fill='#{$color}' d='M5.667,16.492H0c0.123,4.05,1.747,7.721,4.338,10.474l4.006-4.008 C6.775,21.232,5.784,18.98,5.667,16.492z'/><path opacity='0.9' fill='#{$color}' d='M4.338,5.034C1.747,7.788,0.123,11.457,0,15.506h5.667c0.117-2.487,1.108-4.74,2.677-6.465 L4.338,5.034z'/></svg>");
}
@mixin sham-spinner-dots-fading($color, $size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='#{$size}' height='#{$size}' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><g><ellipse fill='#{$color}' cx='16.393' cy='2.809' rx='2.878' ry='2.809'/><path opacity='0.95' fill='#{$color}' d='M8.065,2.306C6.751,3.047,6.301,4.686,7.06,5.968c0.76,1.282,2.438,1.721,3.753,0.981 c1.313-0.741,1.763-2.38,1.005-3.663C11.059,2.004,9.379,1.565,8.065,2.306z'/><path opacity='0.9' fill='#{$color}' d='M5.655,7.385C4.403,6.68,2.805,7.098,2.082,8.319C1.359,9.54,1.789,11.102,3.04,11.808 c1.252,0.705,2.851,0.286,3.574-0.935C7.336,9.652,6.907,8.09,5.655,7.385z'/><ellipse opacity='0.8' fill='#{$color}' cx='2.485' cy='16.383' rx='2.485' ry='2.425'/><path opacity='0.7' fill='#{$color}' d='M3.171,21.181c-1.126,0.635-1.512,2.041-0.86,3.14c0.65,1.099,2.089,1.476,3.215,0.841 c1.126-0.634,1.512-2.04,0.861-3.14C5.737,20.923,4.297,20.546,3.171,21.181z'/><path opacity='0.6' fill='#{$color}' d='M10.552,26.26c-1.064-0.599-2.424-0.243-3.039,0.794c-0.613,1.039-0.25,2.366,0.813,2.965 c1.064,0.599,2.424,0.244,3.039-0.794C11.979,28.187,11.615,26.859,10.552,26.26z'/><ellipse opacity='0.5' fill='#{$color}' cx='16.393' cy='29.957' rx='2.094' ry='2.043'/><path opacity='0.4' fill='#{$color}' d='M22.365,26.482c-0.938,0.527-1.261,1.699-0.719,2.614c0.543,0.917,1.742,1.23,2.682,0.702 c0.938-0.529,1.259-1.7,0.719-2.616C24.503,26.267,23.305,25.953,22.365,26.482z'/><path opacity='0.3' fill='#{$color}' d='M29.353,21.623c-0.875-0.493-1.997-0.201-2.502,0.654s-0.205,1.948,0.671,2.441 c0.875,0.494,1.995,0.201,2.502-0.654C30.527,23.209,30.229,22.117,29.353,21.623z'/><ellipse opacity='0.2' fill='#{$color}' cx='30.301' cy='16.384' rx='1.701' ry='1.659'/><path opacity='0.1' fill='#{$color}' d='M29.222,10.922c0.751-0.423,1.009-1.36,0.573-2.092c-0.432-0.733-1.393-0.985-2.144-0.561 c-0.75,0.423-1.009,1.36-0.574,2.093C27.511,11.094,28.471,11.346,29.222,10.922z'/><path opacity='0.5' fill='#{$color}' d='M22.626,5.843c0.688,0.388,1.568,0.158,1.968-0.514c0.396-0.672,0.159-1.531-0.528-1.918 c-0.688-0.388-1.567-0.158-1.966,0.514C21.702,4.597,21.939,5.456,22.626,5.843z'/></g></svg>");
}
@mixin sham-spinner-peacock-fading($color, $size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='#{$size}' height='#{$size}' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><g><path fill='#{$color}' d='M13.657,2.354c0-1.3,1.05-2.354,2.344-2.354s2.343,1.054,2.343,2.354c0,0.28-0.058,0.544-0.146,0.793h0.01 l-1.662,4.669h-0.008c-0.079,0.224-0.287,0.386-0.537,0.386s-0.458-0.162-0.539-0.386h-0.006l-1.663-4.669h0.011 C13.715,2.898,13.657,2.634,13.657,2.354z'/><path opacity='0.16' fill='#{$color}' d='M19.443,2.59c0.528-1.188,1.913-1.722,3.095-1.193c1.183,0.529,1.714,1.921,1.188,3.108 c-0.112,0.255-0.271,0.474-0.453,0.665l0.008,0.004L19.872,8.76l-0.005-0.003c-0.164,0.171-0.421,0.234-0.648,0.132 c-0.229-0.102-0.354-0.335-0.337-0.573l-0.005-0.002l0.371-4.945l0.008,0.004C19.277,3.11,19.332,2.845,19.443,2.59z'/><path opacity='0.22' fill='#{$color}' d='M24.637,5.169c0.962-0.87,2.443-0.792,3.311,0.174c0.864,0.967,0.788,2.455-0.175,3.325 c-0.207,0.187-0.44,0.322-0.684,0.422l0.006,0.007l-4.566,1.883l-0.003-0.004c-0.219,0.089-0.479,0.042-0.646-0.145 c-0.166-0.187-0.188-0.451-0.075-0.661l-0.003-0.003l2.341-4.366l0.006,0.007C24.272,5.576,24.431,5.357,24.637,5.169z'/><path opacity='0.28' fill='#{$color}' d='M28.336,9.648c1.23-0.402,2.554,0.275,2.953,1.512c0.398,1.236-0.273,2.565-1.506,2.966 c-0.264,0.087-0.533,0.115-0.795,0.106l0.003,0.009l-4.934-0.146l-0.002-0.005c-0.237-0.008-0.453-0.158-0.53-0.396 c-0.078-0.239,0.01-0.488,0.196-0.634l-0.001-0.004l3.906-3.032l0.002,0.009C27.838,9.871,28.071,9.734,28.336,9.648z'/><path opacity='0.34' fill='#{$color}' d='M29.901,15.252c1.286,0.135,2.221,1.294,2.086,2.587s-1.288,2.231-2.576,2.095 c-0.275-0.029-0.533-0.114-0.769-0.228l-0.001,0.009l-4.45-2.148l0.001-0.005c-0.212-0.105-0.35-0.33-0.323-0.58 c0.025-0.25,0.208-0.44,0.438-0.499v-0.005l4.796-1.172l-0.001,0.009C29.357,15.252,29.624,15.222,29.901,15.252z'/><path opacity='0.4' fill='#{$color}' d='M29.062,21.01c1.122,0.65,1.507,2.09,0.859,3.216c-0.647,1.126-2.08,1.512-3.202,0.86 c-0.24-0.138-0.439-0.321-0.61-0.522l-0.004,0.008l-3.194-3.782l0.002-0.004c-0.151-0.182-0.188-0.443-0.061-0.662 c0.125-0.218,0.368-0.318,0.602-0.277l0.002-0.004l4.855,0.889l-0.004,0.008C28.565,20.787,28.823,20.87,29.062,21.01z'/><path opacity='0.46' fill='#{$color}' d='M25.967,25.928c0.761,1.052,0.529,2.524-0.519,3.289c-1.047,0.764-2.512,0.532-3.272-0.521 c-0.164-0.226-0.272-0.474-0.346-0.728l-0.008,0.006l-1.387-4.759l0.004-0.003c-0.065-0.229,0.009-0.482,0.212-0.629 c0.202-0.149,0.465-0.141,0.661-0.007l0.003-0.003l4.077,2.796l-0.008,0.005C25.603,25.521,25.804,25.701,25.967,25.928z'/><path opacity='0.52' fill='#{$color}' d='M21.147,29.155c0.269,1.272-0.539,2.522-1.805,2.793c-1.266,0.271-2.51-0.542-2.779-1.814 c-0.059-0.273-0.058-0.543-0.021-0.806l-0.01,0.002l0.66-4.915l0.004-0.001c0.034-0.236,0.204-0.437,0.449-0.49 c0.245-0.052,0.481,0.062,0.607,0.266l0.003-0.002l2.593,4.219l-0.008,0.002C20.979,28.635,21.09,28.882,21.147,29.155z'/><path opacity='0.58' fill='#{$color}' d='M15.437,30.134c-0.268,1.272-1.512,2.085-2.778,1.814c-1.267-0.271-2.074-1.521-1.806-2.793 c0.059-0.272,0.169-0.52,0.308-0.745l-0.01-0.002l2.593-4.219l0.006,0.001c0.125-0.202,0.362-0.316,0.606-0.265 c0.245,0.053,0.415,0.254,0.448,0.491h0.004l0.66,4.915l-0.009-0.002C15.494,29.59,15.495,29.861,15.437,30.134z'/><path opacity='0.64' fill='#{$color}' d='M9.824,28.695c-0.76,1.052-2.226,1.286-3.272,0.521s-1.279-2.237-0.518-3.289 c0.163-0.227,0.363-0.406,0.581-0.556l-0.009-0.005l4.078-2.796l0.004,0.003c0.195-0.132,0.46-0.141,0.661,0.008 c0.203,0.147,0.276,0.401,0.211,0.63l0.005,0.003l-1.387,4.758l-0.008-0.005C10.097,28.221,9.988,28.469,9.824,28.695z'/><path opacity='0.7' fill='#{$color}' d='M5.279,25.086c-1.12,0.651-2.553,0.266-3.2-0.861C1.433,23.1,1.815,21.66,2.938,21.01 c0.24-0.141,0.497-0.223,0.756-0.271l-0.005-0.008l4.856-0.888l0.003,0.004c0.233-0.041,0.476,0.059,0.601,0.277 c0.126,0.217,0.091,0.48-0.062,0.662l0.003,0.004l-3.194,3.781l-0.004-0.009C5.721,24.765,5.521,24.947,5.279,25.086z'/><path opacity='0.76' fill='#{$color}' d='M2.59,19.934c-1.288,0.136-2.441-0.802-2.577-2.096c-0.134-1.293,0.799-2.451,2.087-2.586 c0.276-0.03,0.545-0.001,0.8,0.061l-0.001-0.009l4.796,1.173l0.001,0.005c0.229,0.057,0.41,0.249,0.437,0.499 c0.027,0.25-0.111,0.475-0.324,0.579v0.005L3.36,19.713l-0.001-0.009C3.121,19.82,2.865,19.904,2.59,19.934z'/><path opacity='0.82' fill='#{$color}' d='M2.217,14.126c-1.231-0.401-1.904-1.729-1.505-2.967c0.401-1.236,1.723-1.914,2.953-1.511 C3.93,9.734,4.163,9.87,4.372,10.033l0.002-0.009l3.906,3.031L8.278,13.06c0.187,0.146,0.275,0.395,0.197,0.634 c-0.076,0.239-0.294,0.388-0.531,0.396l-0.001,0.005L3.01,14.241l0.003-0.009C2.75,14.24,2.481,14.213,2.217,14.126z'/><path opacity='0.88' fill='#{$color}' d='M4.229,8.668c-0.963-0.87-1.04-2.358-0.174-3.325C4.92,4.377,6.401,4.299,7.363,5.169 c0.207,0.188,0.365,0.406,0.491,0.64l0.005-0.007l2.342,4.366l-0.005,0.003c0.112,0.21,0.093,0.474-0.075,0.661 c-0.167,0.187-0.426,0.234-0.646,0.144L9.473,10.98L4.906,9.097L4.913,9.09C4.669,8.99,4.435,8.856,4.229,8.668z'/><path opacity='0.94' fill='#{$color}' d='M8.274,4.504C7.748,3.317,8.28,1.925,9.463,1.396c1.182-0.528,2.567,0.005,3.093,1.194 c0.114,0.255,0.169,0.521,0.189,0.784l0.008-0.004l0.371,4.945L13.12,8.317c0.015,0.237-0.11,0.47-0.338,0.572 c-0.228,0.102-0.484,0.039-0.648-0.132L12.13,8.759L8.721,5.173l0.008-0.003C8.548,4.979,8.387,4.76,8.274,4.504z'/></g></svg>");
}
@mixin sham-spinner-spokes-fading($color, $size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='#{$size}' height='#{$size}' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><path opacity='0.95' fill='#{$color}' d='M17.094,10.55c0,0.583-0.474,1.057-1.058,1.057h-0.072c-0.584,0-1.058-0.474-1.058-1.057 l-0.73-8.787C14.176,0.789,14.967,0,15.94,0h0.119c0.974,0,1.764,0.789,1.764,1.763L17.094,10.55z'/><path opacity='0.9' fill='#{$color}' d='M14.223,10.732c0.293,0.508,0.119,1.154-0.388,1.448l-0.062,0.035 c-0.506,0.292-1.152,0.119-1.444-0.389L7.303,4.583C6.815,3.739,7.104,2.66,7.948,2.174l0.104-0.059 c0.844-0.488,1.922-0.2,2.41,0.644L14.223,10.732z'/><path opacity='0.8' fill='#{$color}' d='M11.827,12.327c0.506,0.293,0.68,0.941,0.388,1.447l-0.036,0.062 c-0.292,0.505-0.939,0.677-1.445,0.385l-7.974-3.76c-0.844-0.488-1.133-1.565-0.646-2.41l0.06-0.105 c0.487-0.843,1.566-1.132,2.41-0.644L11.827,12.327z'/><path opacity='0.7' fill='#{$color}' d='M10.55,14.905c0.585,0,1.059,0.474,1.059,1.059v0.07c0,0.586-0.474,1.059-1.059,1.059 l-8.785,0.729C0.79,17.822,0,17.034,0,16.06v-0.12c0-0.974,0.79-1.763,1.765-1.763L10.55,14.905z'/><path opacity='0.6' fill='#{$color}' d='M10.733,17.777c0.506-0.292,1.153-0.119,1.445,0.387l0.036,0.062 c0.292,0.506,0.118,1.153-0.388,1.447l-7.244,5.023c-0.844,0.488-1.923,0.199-2.41-0.644l-0.06-0.105 c-0.486-0.844-0.197-1.921,0.646-2.41L10.733,17.777z'/><path opacity='0.5' fill='#{$color}' d='M12.327,20.173c0.293-0.508,0.939-0.681,1.445-0.389l0.062,0.036 c0.507,0.293,0.681,0.939,0.388,1.448l-3.761,7.973c-0.488,0.844-1.566,1.132-2.41,0.644l-0.104-0.059 c-0.844-0.487-1.133-1.566-0.646-2.41L12.327,20.173z'/><path opacity='0.4' fill='#{$color}' d='M14.906,21.449c0-0.583,0.474-1.059,1.058-1.059h0.072c0.584,0,1.058,0.475,1.058,1.059 l0.729,8.788c0,0.974-0.79,1.764-1.764,1.764H15.94c-0.974,0-1.765-0.79-1.765-1.764L14.906,21.449z'/><path opacity='0.3' fill='#{$color}' d='M17.777,21.268c-0.293-0.508-0.119-1.154,0.388-1.448l0.061-0.036 c0.508-0.292,1.154-0.119,1.446,0.389l5.025,7.242c0.487,0.844,0.197,1.923-0.646,2.41l-0.104,0.059 c-0.844,0.488-1.922,0.2-2.41-0.644L17.777,21.268z'/><path opacity='0.2' fill='#{$color}' d='M20.172,19.673c-0.505-0.294-0.678-0.941-0.387-1.447l0.036-0.062 c0.292-0.506,0.939-0.678,1.445-0.386l7.973,3.76c0.844,0.488,1.134,1.565,0.647,2.409l-0.061,0.105 c-0.487,0.843-1.565,1.132-2.409,0.644L20.172,19.673z'/><path opacity='0.1' fill='#{$color}' d='M21.45,17.094c-0.586,0-1.059-0.474-1.06-1.06v-0.07c0.001-0.585,0.474-1.059,1.06-1.059 l8.785-0.729c0.974,0,1.765,0.789,1.765,1.763v0.12c0,0.974-0.791,1.763-1.765,1.763L21.45,17.094z'/><path opacity='0.05' fill='#{$color}' d='M21.267,14.222c-0.506,0.292-1.153,0.12-1.445-0.386l-0.036-0.062 c-0.291-0.506-0.118-1.153,0.388-1.447l7.244-5.023c0.844-0.489,1.922-0.2,2.41,0.644l0.06,0.105 c0.486,0.844,0.196,1.921-0.646,2.409L21.267,14.222z'/><path fill='#{$color}' d='M19.673,11.826c-0.293,0.508-0.939,0.681-1.447,0.389l-0.061-0.035c-0.507-0.294-0.681-0.94-0.388-1.448 l3.761-7.974c0.488-0.844,1.566-1.132,2.41-0.644l0.104,0.06c0.843,0.486,1.133,1.565,0.646,2.409L19.673,11.826z'/></svg>");
}
@mixin sham-spinner-pinwheel-fading($color, $size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='#{$size}' height='#{$size}' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><g><path fill='#{$color}' d='M20.639,0.815C19.173,0.287,17.614,0,15.998,0s-3.172,0.287-4.637,0.815L16,12.92L20.639,0.815z'/><path opacity='0.52' fill='#{$color}' d='M11.361,31.185C12.827,31.713,14.386,32,16.002,32s3.172-0.287,4.637-0.815L16,19.08 L11.361,31.185z'/><path opacity='0.4' fill='#{$color}' d='M23.458,30.017c1.409-0.663,2.715-1.561,3.856-2.704c1.143-1.143,2.04-2.446,2.702-3.855 l-11.839-5.279L23.458,30.017z'/><path opacity='0.88' fill='#{$color}' d='M8.542,1.983C7.133,2.646,5.827,3.545,4.686,4.688C3.543,5.83,2.646,7.134,1.983,8.543 l11.839,5.279L8.542,1.983z'/><path opacity='0.28' fill='#{$color}' d='M31.185,20.638C31.714,19.172,32,17.615,32,15.999s-0.286-3.173-0.815-4.637L19.079,16 L31.185,20.638z'/><path opacity='0.76' fill='#{$color}' d='M0.815,11.362C0.286,12.828,0,14.385,0,16.001s0.286,3.173,0.815,4.637L12.921,16 L0.815,11.362z'/><path opacity='0.16' fill='#{$color}' d='M30.017,8.543c-0.663-1.41-1.562-2.715-2.703-3.858c-1.144-1.143-2.448-2.04-3.855-2.702 l-5.28,11.839L30.017,8.543z'/><path opacity='0.64' fill='#{$color}' d='M1.983,23.457c0.662,1.41,1.562,2.715,2.703,3.858c1.144,1.143,2.446,2.04,3.855,2.703 l5.28-11.84L1.983,23.457z'/></g></svg>");
}
@mixin sham-spinner-spokes($color, $size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='#{$size}' height='#{$size}' viewBox='2.157 89.121 32 32' enable-background='new 2.157 89.121 32 32' xml:space='preserve'><g><path fill='#{$color}' d='M12.728,100.231l-7.667-4.427l-1.521,2.634l7.662,4.423C11.523,101.876,12.05,100.984,12.728,100.231z'/><path fill='#{$color}' d='M15.897,98.167l-4.424-7.662l-2.632,1.52l4.427,7.668C14.021,99.014,14.911,98.487,15.897,98.167z'/><path fill='#{$color}' d='M27.474,92.024l-2.633-1.52l-4.424,7.662c0.986,0.32,1.876,0.847,2.629,1.525L27.474,92.024z'/><path fill='#{$color}' d='M19.677,97.968v-8.847h-3.04v8.847c0.491-0.104,0.999-0.161,1.521-0.161S19.187,97.864,19.677,97.968z'/><path fill='#{$color}' d='M25.472,105.121c0,0.521-0.057,1.029-0.16,1.52h8.846v-3.039h-8.847 C25.415,104.092,25.472,104.6,25.472,105.121z'/><path fill='#{$color}' d='M25.111,102.861l7.662-4.424l-1.52-2.633l-7.668,4.427C24.265,100.984,24.791,101.875,25.111,102.861z'/><path fill='#{$color}' d='M23.586,110.011l7.668,4.427l1.52-2.633l-7.662-4.423C24.791,108.367,24.265,109.258,23.586,110.011z'/><path fill='#{$color}' d='M16.638,112.275v8.846h3.039l0.001-8.846c-0.491,0.104-0.999,0.16-1.521,0.16 S17.128,112.379,16.638,112.275z'/><path fill='#{$color}' d='M20.418,112.075l4.423,7.663l2.633-1.521l-4.427-7.668C22.294,111.229,21.403,111.755,20.418,112.075z'/><path fill='#{$color}' d='M10.843,105.121c0-0.521,0.057-1.028,0.161-1.52H2.157v3.04h8.846 C10.899,106.15,10.843,105.643,10.843,105.121z'/><path fill='#{$color}' d='M8.841,118.219l2.632,1.52l4.424-7.663c-0.986-0.32-1.877-0.847-2.629-1.524L8.841,118.219z'/><path fill='#{$color}' d='M11.203,107.382l-7.662,4.423l1.521,2.634l7.667-4.427C12.05,109.259,11.523,108.367,11.203,107.382z'/></g></svg>");
}
@mixin sham-spinner-pinwheel($color, $size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><path fill='#{$color}' d='M20.639,0.815C19.173,0.287,17.614,0,15.998,0s-3.172,0.287-4.637,0.815L16,12.92L20.639,0.815z'/><path fill='#{$color}' enable-background='new' d='M11.361,31.186C12.827,31.713,14.386,32,16.002,32s3.172-0.287,4.637-0.814 L16,19.08L11.361,31.186z'/><path fill='#{$color}' enable-background='new' d='M23.458,30.018c1.409-0.664,2.715-1.562,3.856-2.705 c1.143-1.143,2.039-2.445,2.701-3.854L18.177,18.18L23.458,30.018z'/><path fill='#{$color}' enable-background='new' d='M8.542,1.983C7.133,2.646,5.827,3.545,4.686,4.688 C3.543,5.83,2.646,7.134,1.983,8.543l11.839,5.279L8.542,1.983z'/><path fill='#{$color}' enable-background='new' d='M31.186,20.639C31.714,19.172,32,17.615,32,15.999s-0.286-3.173-0.814-4.637 L19.079,16L31.186,20.639z'/><path fill='#{$color}' enable-background='new' d='M0.815,11.362C0.286,12.828,0,14.385,0,16.001s0.286,3.173,0.815,4.638 L12.921,16L0.815,11.362z'/><path fill='#{$color}' enable-background='new' d='M30.018,8.543c-0.664-1.41-1.562-2.715-2.703-3.858 c-1.145-1.143-2.448-2.04-3.855-2.702L18.18,13.822L30.018,8.543z'/><path fill='#{$color}' enable-background='new' d='M1.983,23.457c0.662,1.41,1.562,2.715,2.703,3.857 c1.144,1.144,2.446,2.041,3.855,2.703l5.28-11.84L1.983,23.457z'/></svg>");
}
@mixin sham-spinner-windmill($color, $size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='#{$size}' height='#{$size}' viewBox='-177.382 -53.002 32 32' enable-background='new -177.382 -53.002 32 32' xml:space='preserve'><g><polygon fill='#{$color}' points='-160.81,-41.602 -161.952,-41.602 -165.479,-49.476 -160.81,-53.002'/><polygon fill='#{$color}' points='-163.186,-41.271 -164.175,-40.7 -171.167,-45.756 -168.886,-51.145'/><polygon fill='#{$color}' points='-165.079,-39.797 -165.65,-38.807 -174.233,-39.691 -174.952,-45.498'/><polygon fill='#{$color}' points='-165.981,-37.574 -165.981,-36.432 -173.856,-32.905 -177.382,-37.574'/><polygon fill='#{$color}' points='-165.651,-35.198 -165.08,-34.208 -170.136,-27.216 -175.525,-29.498'/><polygon fill='#{$color}' points='-164.178,-33.305 -163.188,-32.734 -164.071,-24.15 -169.878,-23.432'/><polygon fill='#{$color}' points='-161.955,-32.402 -160.812,-32.403 -157.285,-24.528 -161.955,-21.002'/><polygon fill='#{$color}' points='-159.578,-32.732 -158.588,-33.304 -151.597,-28.248 -153.878,-22.859'/><polygon fill='#{$color}' points='-157.685,-34.206 -157.114,-35.196 -148.531,-34.313 -147.812,-28.506'/><polygon fill='#{$color}' points='-156.782,-36.429 -156.783,-37.572 -148.908,-41.099 -145.382,-36.429'/><polygon fill='#{$color}' points='-157.112,-38.806 -157.685,-39.795 -152.628,-46.787 -147.239,-44.506'/><polygon fill='#{$color}' points='-158.586,-40.699 -159.577,-41.27 -158.693,-49.853 -152.886,-50.572'/></g></svg>");
}
@mixin sham-spinner-skittles($size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='%23{$size}' height='%23{$size}' viewBox='-12.813 -17.879 32 32' enable-background='new -12.813 -17.879 32 32' xml:space='preserve'><g><ellipse fill='%23CC6666' cx='3.697' cy='-15.696' rx='2.301' ry='2.184'/><ellipse fill='%23CC6666' cx='-0.215' cy='-13.054' rx='2.02' ry='1.916'/><ellipse fill='%23CC6666' cx='-2.762' cy='-9.821' rx='1.738' ry='1.649'/><ellipse fill='%23CC6666' cx='-3.107' cy='-6.468' rx='1.457' ry='1.382'/><ellipse fill='%23CC6666' cx='-1.891' cy='-3.872' rx='1.176' ry='1.115'/></g><g><path fill='%2370535C' d='M-8.341-10.92c1.101,0.603,1.477,1.938,0.842,2.982c-0.635,1.044-2.042,1.402-3.143,0.8 c-1.101-0.604-1.478-1.938-0.842-2.982C-10.847-11.166-9.441-11.524-8.341-10.92z'/><path fill='%2370535C' d='M-8.027-6.154c0.965,0.529,1.297,1.702,0.739,2.618c-0.559,0.916-1.793,1.23-2.759,0.702 c-0.965-0.529-1.297-1.701-0.739-2.618C-10.228-6.369-8.993-6.683-8.027-6.154z'/><path fill='%2370535C' d='M-6.49-2.213c0.832,0.456,1.117,1.465,0.637,2.253C-6.333,0.83-7.396,1.1-8.229,0.645 C-9.059,0.189-9.344-0.82-8.864-1.608C-8.384-2.398-7.321-2.668-6.49-2.213z'/><path fill='%2370535C' d='M-3.744-0.021c0.696,0.382,0.935,1.227,0.533,1.888s-1.293,0.887-1.99,0.506 c-0.697-0.382-0.935-1.228-0.534-1.888C-5.333-0.178-4.441-0.403-3.744-0.021z'/><path fill='%2370535C' d='M-0.908,0.508c0.562,0.308,0.754,0.99,0.43,1.524S-1.521,2.749-2.083,2.44 C-2.645,2.132-2.837,1.45-2.514,0.917C-2.188,0.383-1.47,0.201-0.908,0.508z'/></g><g><path fill='%23D6C054' d='M-11.663,3.38c1.1-0.603,2.508-0.245,3.143,0.799c0.634,1.044,0.258,2.38-0.842,2.982 c-1.101,0.603-2.508,0.246-3.143-0.799S-12.764,3.984-11.663,3.38z'/><path fill='%23D6C054' d='M-7.156,5.506c0.965-0.529,2.2-0.214,2.758,0.702s0.228,2.088-0.738,2.618 c-0.966,0.528-2.202,0.214-2.759-0.702C-8.453,7.207-8.122,6.036-7.156,5.506z'/><path fill='%23D6C054' d='M-2.791,6.214c0.831-0.456,1.894-0.185,2.374,0.604c0.48,0.789,0.195,1.797-0.636,2.253 c-0.831,0.456-1.895,0.185-2.375-0.604S-3.622,6.669-2.791,6.214z'/><path fill='%23D6C054' d='M0.581,5.053C1.277,4.671,2.168,4.897,2.57,5.559C2.973,6.22,2.734,7.066,2.037,7.447 C1.341,7.829,0.45,7.603,0.047,6.941C-0.355,6.28-0.116,5.434,0.581,5.053z'/><path fill='%23D6C054' d='M2.483,2.987c0.562-0.309,1.281-0.125,1.605,0.408c0.324,0.534,0.131,1.216-0.43,1.524 C3.096,5.226,2.377,5.043,2.053,4.51C1.728,3.977,1.921,3.294,2.483,2.987z'/></g><g><ellipse fill='%23487081' cx='1.653' cy='11.938' rx='2.301' ry='2.183'/><ellipse fill='%23487081' cx='5.565' cy='9.296' rx='2.02' ry='1.916'/><ellipse fill='%23487081' cx='8.112' cy='6.063' rx='1.738' ry='1.65'/><ellipse fill='%23487081' cx='8.457' cy='2.71' rx='1.456' ry='1.382'/><ellipse fill='%23487081' cx='7.241' cy='0.114' rx='1.176' ry='1.115'/></g><g><path fill='%239F6163' d='M14.712,8.132c-1.1-0.603-1.477-1.939-0.842-2.982c0.636-1.044,2.042-1.402,3.143-0.799 c1.101,0.604,1.479,1.938,0.844,2.982C17.22,8.378,15.813,8.735,14.712,8.132z'/><path fill='%239F6163' d='M14.399,3.365c-0.966-0.529-1.298-1.702-0.739-2.617c0.557-0.917,1.792-1.231,2.757-0.702 c0.966,0.528,1.296,1.701,0.74,2.618C16.6,3.581,15.365,3.895,14.399,3.365z'/><path fill='%239F6163' d='M12.862-0.576c-0.832-0.456-1.116-1.464-0.636-2.253c0.48-0.789,1.542-1.06,2.374-0.604 c0.831,0.455,1.116,1.465,0.636,2.253C14.756-0.391,13.693-0.121,12.862-0.576z'/><path fill='%239F6163' d='M10.117-2.767C9.419-3.149,9.181-3.994,9.584-4.656c0.401-0.66,1.292-0.887,1.989-0.505 c0.697,0.382,0.936,1.227,0.534,1.888C11.704-2.611,10.813-2.385,10.117-2.767z'/><path fill='%239F6163' d='M7.279-3.296C6.717-3.605,6.524-4.287,6.85-4.82c0.325-0.534,1.043-0.717,1.604-0.409 C9.018-4.92,9.209-4.238,8.885-3.705C8.561-3.171,7.842-2.989,7.279-3.296z'/></g><g><path fill='%23A3B57B' d='M18.035-7.138c-1.1,0.603-2.508,0.244-3.143-0.8c-0.636-1.044-0.258-2.379,0.842-2.982 c1.101-0.603,2.507-0.246,3.144,0.799C19.513-9.077,19.136-7.742,18.035-7.138z'/><path fill='%23A3B57B' d='M13.528-9.264c-0.965,0.528-2.2,0.214-2.758-0.702c-0.558-0.917-0.227-2.088,0.739-2.618 c0.965-0.529,2.201-0.214,2.759,0.702C14.825-10.965,14.494-9.794,13.528-9.264z'/><path fill='%23A3B57B' d='M9.163-9.972C8.332-9.516,7.268-9.787,6.79-10.575c-0.48-0.789-0.196-1.797,0.636-2.253 c0.831-0.456,1.894-0.185,2.374,0.604C10.279-11.436,9.995-10.428,9.163-9.972z'/><path fill='%23A3B57B' d='M5.792-8.812C5.094-8.43,4.203-8.656,3.801-9.317c-0.401-0.661-0.163-1.506,0.534-1.887 c0.697-0.383,1.587-0.156,1.99,0.505S6.487-9.192,5.792-8.812z'/><path fill='%23A3B57B' d='M3.889-6.745C3.327-6.437,2.608-6.62,2.283-7.152c-0.325-0.534-0.132-1.216,0.43-1.524 c0.563-0.308,1.282-0.125,1.606,0.408C4.644-7.734,4.451-7.053,3.889-6.745z'/></g></svg>");
}
@mixin sham-spinner-foliage($size, $speed) {
@extend %spinner-properties;
animation-duration :$speed;
-webkit-animation-duration :$speed;
background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='%23{$size}' height='%23{$size}' viewBox='-29.813 -10.879 32 32' enable-background='new -29.813 -10.879 32 32' xml:space='preserve'><path fill='%23CC6666' d='M-11.673-4.916c0,3.294-2.141,5.964-2.141,5.964s-2.141-2.67-2.141-5.964c0-3.293,2.141-5.963,2.141-5.963 S-11.673-8.209-11.673-4.916z'/><path fill='%2370535C' d='M-19.397-3.49c2.329,2.329,2.704,5.731,2.704,5.731s-3.401-0.375-5.73-2.704 c-2.329-2.329-2.704-5.73-2.704-5.73S-21.725-5.818-19.397-3.49z'/><path fill='%23A2C98F' d='M-23.85,2.98c3.294,0,5.964,2.141,5.964,2.141s-2.67,2.141-5.964,2.141c-3.293,0-5.963-2.141-5.963-2.141 S-27.144,2.98-23.85,2.98z'/><path fill='%23D6C054' d='M-22.424,10.704c2.329-2.329,5.73-2.703,5.73-2.703s-0.375,3.401-2.704,5.73 c-2.328,2.329-5.73,2.703-5.73,2.703S-24.753,13.033-22.424,10.704z'/><path fill='%2354ACD3' d='M-15.954,15.158c0-3.294,2.141-5.964,2.141-5.964s2.141,2.67,2.141,5.964c0,3.293-2.141,5.963-2.141,5.963 S-15.954,18.451-15.954,15.158z'/><path fill='%23487081' d='M-8.23,13.732c-2.329-2.329-2.704-5.731-2.704-5.731s3.402,0.375,5.731,2.704c2.329,2.329,2.703,5.73,2.703,5.73S-5.901,16.061-8.23,13.732z'/><path fill='%239F6163' d='M-3.777,7.262c-3.294,0-5.964-2.141-5.964-2.141s2.669-2.14,5.964-2.14c3.293,0,5.963,2.14,5.963,2.14 S-0.483,7.262-3.777,7.262z'/><path fill='%23A3B57B' d='M-5.203-0.462c-2.329,2.329-5.731,2.703-5.731,2.703s0.375-3.401,2.704-5.73 C-5.901-5.818-2.5-6.192-2.5-6.192S-2.874-2.791-5.203-0.462z'/></svg>");
}
// Animation
@-moz-keyframes sham-spin {
0 { -moz-transform : rotate(0); }
100% { -moz-transform : rotate(360deg); }
}
@-webkit-keyframes sham-spin {
0% { -webkit-transform : rotate(0); }
100% { -webkit-transform : rotate(360deg); }
}
@keyframes sham-spin {
0% { transform : rotate(0); }
100% { transform : rotate(360deg); }
}
@-o-keyframes sham-spin {
0% { -o-transform : rotate(0); }
100% { -o-transform : rotate(360deg); }
}