*{
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

.container {
    display: flex;
    flex-wrap: wrap;
    background-color: #FFFF;
    height: 50vh;
    align-items: flex-start; /* Change to flex-start to align items at the start */
    margin-bottom: 100px;
    padding: 10px; /* Add padding if needed */
}

.progress,.progress-container{
    width: 200px;
    height: 200px;
    font-size: 30px;
    color: #fff;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #07070c;
    text-align: center;
    line-height: 200px;
    margin: 20px
}

.progress::after {content: "%";}

.progress .title {position: relative;z-index: 100;}

.progress .overlay {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #07070c
}

.progress .left, .progress .right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 10px solid #06D001;
    border-radius: 100px 0px 0px 100px;
    border-right: 0;
    transform-origin: right;
}

.progress .left {animation: load1 1s linear forwards;}

.progress:nth-of-type(2) .right, .progress:nth-of-type(3) .right {animation: load2 .5s linear forwards 1s;}

.progress:last-of-type .right, .progress:first-of-type .right {animation: load3 .8s linear forwards 1s;}

@keyframes load1 {
    0% {transform: rotate(0deg);}

    100% {transform: rotate(180deg);}
}

@keyframes load2 {
    0% {z-index: 100;transform: rotate(180deg);}

    100% {z-index: 100;transform: rotate(270deg);}
}

@keyframes load3 {
    0% {z-index: 100;transform: rotate(180deg);}

    100% {
        z-index: 100;transform: rotate(315deg);}
}