@import "../../variables.css";

/*  */

.progress {
    width: 15rem;
    height: 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    border-radius: 6px;
    background-color: #9bdfff;
}

.progress>div {
    width: 0%;
    height: 100%;
    border-radius: 6px;
    background-color: #25baff;
    /* transition: width 200ms; */
    animation: progress 2s ease-out infinite;
}

@keyframes progress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@media (min-width: 640px) {
    .progress {
        width: 15rem;
        height: 8px;
    }
}

@media (min-width: 768px) {
    .progress {
        width: 15rem;
        height: 8px;
    }
}

@media (min-width: 1024px) {
    .progress {
        width: 18rem;
        height: 10px;
    }
}

@media (min-width: 1280px) {
    .progress {
        width: 22rem;
        height: 12px;
    }
}