.load {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading {
    border-radius: 50%;
    width: 20vw;
    height: 20vw;
    animation: rotate 2s linear infinite; 
}

.loading::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 4px solid transparent;
    border-radius: 50%;
    border-top-color: #f88c00;
    animation: dash 1.5s ease-in-out infinite; 
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        border-width: 4px;
        transform: rotate(0deg);
        border-top-color: #f88c00; 
    }
    50% {
        border-width: 8px;
        transform: rotate(270deg);
        border-top-color: #f88c00; 
    }
    100% {
        border-width: 4px;
        transform: rotate(360deg);
        border-top-color: #cc6700; 
    }
}