.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 500000;
    background-color: #3333338a;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.inline-loader{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    /* z-index: 500000; */
    /* background-color: #3333338a; */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.absolute-loader{
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* transform: translate(-50%, -50%); */
    z-index: 500000;
    background-color: #3333338a;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.loader {
    position: relative;
}
.loader__item {
    position: absolute;
    width: 12px;
    height: 3px;
    background: transparent;
    border-radius: 1.5px;
}
.loader__item-1 {
    transform: translate(7.8564064606px, 6.5px) rotate(30deg);
    animation: blink 0.6666666667s linear 0.0555555556s infinite;
}
.loader__item-2 {
    transform: translate(2px, 12.3564064606px) rotate(60deg);
    animation: blink 0.6666666667s linear 0.1111111111s infinite;
}
.loader__item-3 {
    transform: translate(-6px, 14.5px) rotate(90deg);
    animation: blink 0.6666666667s linear 0.1666666667s infinite;
}
.loader__item-4 {
    transform: translate(-14px, 12.3564064605px) rotate(120deg);
    animation: blink 0.6666666667s linear 0.2222222222s infinite;
}
.loader__item-5 {
    transform: translate(-19.8564064605px, 6.5px) rotate(150deg);
    animation: blink 0.6666666667s linear 0.2777777778s infinite;
}
.loader__item-6 {
    transform: translate(-21.9999999988px, -1.4999999998px) rotate(180deg);
    animation: blink 0.6666666667s linear 0.3333333333s infinite;
}
.loader__item-7 {
    transform: translate(-19.8564064248px, -9.4999999943px) rotate(210deg);
    animation: blink 0.6666666667s linear 0.3888888889s infinite;
}
.loader__item-8 {
    transform: translate(-13.9999993307px, -15.3564063383px) rotate(240deg);
    animation: blink 0.6666666667s linear 0.4444444444s infinite;
}
.loader__item-9 {
    transform: translate(-5.9999911401px, -17.499998179px) rotate(270deg);
    animation: blink 0.6666666667s linear 0.5s infinite;
}
.loader__item-10 {
    transform: translate(2.0000891502px, -15.356386087px) rotate(300deg);
    animation: blink 0.6666666667s linear 0.5555555556s infinite;
}
.loader__item-11 {
    transform: translate(7.8571249178px, -9.4998192505px) rotate(330deg);
    animation: blink 0.6666666667s linear 0.6111111111s infinite;
}
.loader__item-12 {
    transform: translate(10.0048195847px, -1.4986761448px) rotate(360deg);
    animation: blink 0.6666666667s linear 0.6666666667s infinite;
}
@keyframes blink {
    0% {
        background: #ddd;
   }
    100% {
        background: #333;
   }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
   }
    100% {
        background: rotate(360deg);
   }
}