mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-27 15:30:57 +00:00
115 lines
2.1 KiB
CSS
115 lines
2.1 KiB
CSS
.m_5ae2e3c {
|
|
--loader-size-xs: 18px;
|
|
--loader-size-sm: 22px;
|
|
--loader-size-md: 36px;
|
|
--loader-size-lg: 44px;
|
|
--loader-size-xl: 58px;
|
|
--loader-size: var(--loader-size-md);
|
|
--loader-color: var(--mantine-primary-color-filled);
|
|
}
|
|
|
|
/* ----- Bars loader ----- */
|
|
@keyframes m_5d2b3b9d {
|
|
0% {
|
|
transform: scale(0.6);
|
|
opacity: 0;
|
|
}
|
|
|
|
50%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.m_7a2bd4cd {
|
|
position: relative;
|
|
width: var(--loader-size);
|
|
height: var(--loader-size);
|
|
display: flex;
|
|
gap: calc(var(--loader-size) / 5);
|
|
}
|
|
|
|
.m_870bb79 {
|
|
flex: 1;
|
|
background: var(--loader-color);
|
|
animation: m_5d2b3b9d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.m_870bb79:nth-of-type(1) {
|
|
animation-delay: -240ms;
|
|
}
|
|
|
|
.m_870bb79:nth-of-type(2) {
|
|
animation-delay: -120ms;
|
|
}
|
|
|
|
.m_870bb79:nth-of-type(3) {
|
|
animation-delay: 0;
|
|
}
|
|
|
|
/* ----- Dots loader ----- */
|
|
@keyframes m_aac34a1 {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(0.6);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.m_4e3f22d7 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: calc(var(--loader-size) / 10);
|
|
position: relative;
|
|
width: var(--loader-size);
|
|
height: var(--loader-size);
|
|
}
|
|
|
|
.m_870c4af {
|
|
width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
|
|
height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
|
|
border-radius: 50%;
|
|
background: var(--loader-color);
|
|
animation: m_aac34a1 0.8s infinite linear;
|
|
}
|
|
|
|
.m_870c4af:nth-child(2) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
/* ----- Oval loader ----- */
|
|
@keyframes m_f8e89c4b {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.m_b34414df {
|
|
display: inline-block;
|
|
width: var(--loader-size);
|
|
height: var(--loader-size);
|
|
}
|
|
|
|
.m_b34414df::after {
|
|
content: '';
|
|
display: block;
|
|
width: var(--loader-size);
|
|
height: var(--loader-size);
|
|
border-radius: 10000px;
|
|
border-width: calc(var(--loader-size) / 8);
|
|
border-style: solid;
|
|
border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent;
|
|
animation: m_f8e89c4b 1.2s linear infinite;
|
|
}
|