How to Create Animate Loader with CSS?

In this tutorial you’re going to learn how to make a loader / pre-loader CSS animation. It would need to built without any external assets, only HTML and embedded CSS. Note that this article assumes familiarity with CSS animation properties and keyframe animations.

Let’s start with the basic HTML structure:

At first, you need a screen wrapper. If want to use it as a pre-loader, it will very useful for you. Otherwise you can remove spinner-wrapper div.
Create a div named spinner which has width & height and it will main wrapper of your animate blocks.
Here, we have used 2 animated blocks cube1 & cube2. These cubes are moving & rotating with keyframe animations.

<div class="spinner-wrapper">
	<div class="spinner">
		<div class="cube1"></div>
		<div class="cube2"></div>
	</div>
</div>

The CSS is embedded in the head and the loader HTML right after the opening body tag. 

.spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999;
}
.spinner {
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    width: 40px;
    height: 40px;
    position: relative;
}
.cube1,
.cube2 {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
}
.cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.spinner h3 {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 65px;
    text-align: center;
    left: -15px;
}
@-webkit-keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
    }
    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
    }
    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
    }
    100% {
        -webkit-transform: rotate(-360deg)
    }
}
@keyframes sk-cubemove {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }
    50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }
    50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }
    75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }
    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}
/*

That’s all !! See the Result:

See the Pen How to Create Animate Loader with CSS? by Web Mantras (@webmantras) on CodePen.dark

Thanks for reading the article! I’m Mukesh, Creative Designer & front-end engineer. If you want any clarifications or think I skipped something important, please let me know and I’ll make sure to fix it. Or if you want any other type of CSS animations. Please let me know.