CSS Animated Circle Spinner 2

in CSS Loaders

animated-circle-2

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please wait.

CSS Loaders

In this tutorial we're going to create an animated circle spinner which will rotate the outside border of the circle to give a spinning effect to the circle.

The HTML

The HTML is very simple all you need is one HTML element, CSS will use the pseudo class of :before and :after to create this spinning effect.

<div id="animated-circle-2"></div>

The CSS

To create the faded border of the circle we use the main element and apply a background gradient to the element. We also apply the animation to this element as it will also apply the animation of spinning to the two pseudo elements.

#animated-circle-2 {
    margin: 2rem auto;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: #333;
    background: linear-gradient(to right, #333 10%, rgba(0, 0, 0, 0) 42%);
    position: relative;
    animation: spinAll 1.1s infinite linear;
}

The before element is simply going to be a solid colour circle, we then position this to the end of the main element faded background, this gives the effect of a solid front with a faded back border.

#animated-circle-2:before {
    width: 50%;
    height: 50%;
    background: #333;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}

The :after pseudo is going to be the inside grey circle, so we create the element using border-radius: 50% to make it a full circle.

#animated-circle-2:after {
    background: #f5f5f5;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

All of these 3 elements will use the same animation, this animation is going to spin the element 360 degrees on an infinite loop creating the spinner.

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

View the demo to see this HTML and CSS in action.

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To Newsletter

Get weekly updates to your email