CSS Animated Circle Spinner 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.