2022-12-10 12:14:48 +03:00
|
|
|
.loader-container {
|
|
|
|
display: inline-block;
|
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
pointer-events: none;
|
2022-12-18 15:53:32 +03:00
|
|
|
animation: slow-appear 0.3s ease-in-out 1s both;
|
2022-12-10 12:14:48 +03:00
|
|
|
vertical-align: middle;
|
2022-12-18 15:53:32 +03:00
|
|
|
margin: 8px;
|
2022-12-10 12:14:48 +03:00
|
|
|
}
|
|
|
|
@keyframes slow-appear {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.loader-container.abrupt {
|
|
|
|
animation: none;
|
|
|
|
}
|
|
|
|
.loader-container.hidden {
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.loader {
|
|
|
|
display: inline-block;
|
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
border-radius: 50%;
|
|
|
|
border: 2.5px solid;
|
|
|
|
border-color: var(--loader-color) var(--loader-color) transparent transparent;
|
|
|
|
animation: loader 1s infinite linear;
|
|
|
|
}
|
|
|
|
@keyframes loader {
|
|
|
|
0% {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: rotate(360deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.loader-container.hidden .loader {
|
|
|
|
animation: none;
|
2022-12-18 15:53:32 +03:00
|
|
|
}
|