DonutSpinner

DonutSpinner

HTML :

    <div class="donutSpinner">
        Hover Me
    </div>

CSS :

    @keyframes donut-spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .donutSpinner {
        display: inline-block;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-left-color: #5778F3;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        animation: donut-spin 1.2s linear infinite;
    }