blob: 66297df6e0fc5deb4138f9e8240e2967f54f464e [file] [log] [blame]
Matteo Scandoloc01f8a52016-06-13 18:12:48 -07001.loader {
2 font-size: 10px;
3 margin: 0 auto;
4 text-indent: -9999em;
5 width: 11em;
6 height: 11em;
7 border-radius: 50%;
8 background: #ffffff;
9 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
10 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
11 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
12 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
13 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
14 position: relative;
15 animation: loaderSpinner 1.4s infinite linear;
16 transform: translateZ(0);
17}
18.loader:before {
19 width: 50%;
20 height: 50%;
21 background: $brand-primary;
22 border-radius: 100% 0 0 0;
23 position: absolute;
24 top: 0;
25 left: 0;
26 content: '';
27}
28.loader:after {
29 background: #fff;
30 width: 75%;
31 height: 75%;
32 border-radius: 50%;
33 content: '';
34 margin: auto;
35 position: absolute;
36 top: 0;
37 left: 0;
38 bottom: 0;
39 right: 0;
40}
41
42@keyframes loaderSpinner {
43 0% {
44 -webkit-transform: rotate(0deg);
45 transform: rotate(0deg);
46 }
47 100% {
48 -webkit-transform: rotate(360deg);
49 transform: rotate(360deg);
50 }
51}