CSS spinners

#web #css

I wanted to share this trick for adding simple spinners to your website. It’s just a few lines of CSS, and you can also customize which icons to use.

So, we want to add it easily, it should be simple as <spinner></spinner> in our HTML. Actually, it is that simple. Here is the CSS for our custom spinner tag:

spinner::after {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 32px;
    aspect-ratio: 1 !important;
    content: "progress_activity";
    font-family: "Material Symbols Outlined";
    animation: spin 1s linear infinite;
}

spinner[icon]::after {
    content: attr(icon);
}

spinner[reverse]::after {
    animation-direction: reverse;
}

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

Just a single CSS class! However, you need to include the Material Symbols Outlined font in your project by adding this line to the top of your CSS file:

@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0");

Now, let’s see how it looks in action:

You can also customize the spinner icon by adding an icon attribute to the spinner tag. For example, <spinner icon="cameraswitch"></spinner> will show a camera switch icon spinning:

Forget about Material Icons, you can also use emojis as spinner icons. And there is also a reverse attribute to make the spinner spin in the opposite direction. For example, <spinner icon="🤸🏻‍♂️"></spinner> will show a person cartwheeling:

That’s it! You can now use this simple spinner in your projects. Enjoy!