.loader-wrapper {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: white;
}

.infinity-loader {
    display: inline-grid;
    padding: 5px;
    background: #fff;
    filter: blur(4px) contrast(12);
}

.infinity-loader:before {
    content: "";
    height: 40px;
    aspect-ratio: 3;
    --c: #0000 64%, #000 66% 98%, #0000 101%;
    background:
        radial-gradient(35% 146% at 50% 159%, var(--c)) 0 0,
        radial-gradient(35% 146% at 50% -59%, var(--c)) 100% 100%;
    background-size: calc(200%/3) 50%;
    background-repeat: repeat-x;
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 10%, #0000 0 20%);
    animation: infinity-loader .8s infinite linear;
}

@keyframes infinity-loader {
    100% {
        background-position: -200% 0, -100% 100%;
    }
}

.circle-loader {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #ED303C 94%, #0000),
        radial-gradient(farthest-side, #3B8183 94%, #0000),
        radial-gradient(farthest-side, #FAD089 94%, #0000),
        radial-gradient(farthest-side, #FF9C5B 94%, #0000),
        #ED303C;
    background-size: 105% 105%;
    background-repeat: no-repeat;
    animation: circle-loader 2s infinite;
}

@keyframes circle-loader {
    0% {
        background-position: 50% -50px, -40px 50%, 50% calc(100% + 50px), calc(100% + 50px) 50%
    }

    20%,
    25% {
        background-position: 50% -50px, -50px 50%, 50% calc(100% + 50px), 50% 50%
    }

    45%,
    50% {
        background-position: 50% -50px, -50px 50%, 50% 50%, 50% 50%
    }

    75%,
    75% {
        background-position: 50% -50px, 50% 50%, 50% 50%, 50% 50%
    }

    95%,
    100% {
        background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%
    }
}

.bar-loader {
    height: 4px;
    width: 100%;
    --c1: no-repeat linear-gradient(#6100ee 0 0);
    --c2: no-repeat linear-gradient(#26aa0c 0 0);
    background: var(--c1), var(--c2), #d7b8fc;
    background-size: 60% 100%;
    animation: bar-loader 3s infinite;
}

@keyframes bar-loader {
    0% {
        background-position: -150% 0, -150% 0
    }

    66% {
        background-position: 250% 0, -150% 0
    }

    100% {
        background-position: 250% 0, 250% 0
    }
}

.progress {
    display: none;
    position: absolute;
    right: 10px;
    bottom: 0;
    width: 200px;
    background-color: rgb(197, 196, 196);
    box-shadow: 0 0 10px rgba(0 0 0/5%);
    border-radius: 5px;
    margin: 10px 0;
}

.progress.active {
    display: block;
}

.progress-bar {
    height: 20px;
    background-color: rgb(80, 183, 83);
    transition: width 0.4s;
    position: absolute;
    top: 0;
    left: 0;
}

#progressPercentage {
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}