//Scss
.bola-loading {
    $fondo:yellow;
    $borde:blue;
    
    padding: 8px;
    border-radius: 200px;
    background: $fondo;
    width: fit-content;
    position: relative;
    &:before{
        content: "";
        background: $borde;
        position: absolute;
        border-radius: 200px;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: polygon(50% 0%, 50% 0%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
    &:hover{
        &:before{
            animation: llenado .5s linear forwards;
        }
    }
    
    @keyframes llenado {
        0%   {
            clip-path: polygon(50% 0%, 50% 0%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
        }
        10%   {
            clip-path: polygon(50% 0%, 100% 0%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
        }
        11%   {
            clip-path: polygon(50% 0%, 100% 0%, 100% 0%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
        }
        30%   {
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
        }
        31%   {
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%);
        }
        50%   {
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 50% 50%, 50% 50%);
        }
        51%   {
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 50% 50%, 50% 50%);
        }
        70%   {
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 50%, 50% 50%);
        }
        71%   {
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%, 50% 50%);
        }
        100%   {
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);
        }
    }
}