@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
49 lines (46 loc) • 1.05 kB
CSS
.ajaxLoader {
position: absolute;
top: 0 ;
}[dir=ltr] .ajaxLoader {
left: 0 ;
right: 0 ;
}[dir=rtl] .ajaxLoader {
right: 0 ;
left: 0 ;
}
.loader {
width: 100% ;
/* Variable:Ignore */
height: 5px;
background-size: 50% auto;
}
[dir=ltr] .loader {
background-image: linear-gradient(to right, var(--zdt_loader_bg) 30%, var(--dot_solitude) 50%, var(--zdt_loader_bg) 90%);
background-position: 0 100%;
animation: loading-ltr 2s infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
[dir=rtl] .loader {
background-image: linear-gradient(to left, var(--zdt_loader_bg) 30%, var(--dot_solitude) 50%, var(--zdt_loader_bg) 90%);
background-position: 100% 100%;
animation: loading-rtl 2s infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes loading-ltr {
0% {
background-position: 0 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes loading-rtl {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}