2019-06-12 06:12:03 +00:00
|
|
|
.spinner-circle {
|
|
|
|
@apply .w-8 .h-8;
|
|
|
|
border: 3px solid hsla(211, 12%, 43%, 0.2);
|
|
|
|
border-top-color: hsl(211, 12%, 43%);
|
|
|
|
border-radius: 50%;
|
|
|
|
animation: spin 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
|
|
|
|
|
|
|
|
&.spinner-sm {
|
|
|
|
@apply .w-4 .h-4 .border-2;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.spinner-lg {
|
|
|
|
@apply .w-16 .h-16;
|
|
|
|
border-width: 6px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.spinner-blue {
|
2019-07-28 03:23:44 +00:00
|
|
|
border-style: solid;
|
|
|
|
border-color: hsla(212, 92%, 43%, 0.2);
|
2019-06-12 06:12:03 +00:00
|
|
|
border-top-color: hsl(212, 92%, 43%);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.spinner-white {
|
2019-07-28 03:23:44 +00:00
|
|
|
border-style: solid;
|
|
|
|
border-color: rgba(255, 255, 255, 0.2);
|
2019-06-12 06:12:03 +00:00
|
|
|
border-top-color: rgb(255, 255, 255);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
to {
|
|
|
|
transform: rotate(360deg);
|
|
|
|
}
|
|
|
|
}
|