StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Show proper spinners

Browse source
This commit is contained in:
Dane Everitt 2019-12-22 14:53:27 -08:00
parent 5a31771b4b
commit 446d5be62b
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 31 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

59
resources/styles/components/spinners.css
View file

@ -1,62 +1,3 @@
.spinner {
@apply .h-4 .relative .bg-transparent;
pointer-events: none;
&.spinner-xl {
@apply .h-16;
}
&:after {
@apply .border-2 .border-neutral-400 .absolute .block .h-4 .w-4 .rounded-full;
animation: spinners--spin 500ms infinite linear;
border-top-color: transparent !important;
border-right-color: transparent !important;
content: '';
left: calc(50% - (1em / 2));
}
&.spinner-relative:after {
@apply .relative;
}
&.spinner-xl:after {
@apply .h-16 .w-16;
left: calc(50% - (4rem / 2));
}
/**
* Speeds
*/
&.spin-slow:after {
animation: spinners--spin 1200ms infinite linear;
}
/**
* Spinner Colors
*/
&.blue:after, &.text-blue:after {
@apply .border-primary-500;
}
&.white:after, &.text-white:after {
@apply .border-white;
}
&.spinner-thick:after {
@apply .border-4;
}
}
@keyframes spinners--spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spinner-circle {
@apply .w-8 .h-8;
border: 3px solid hsla(211, 12%, 43%, 0.2);