How to Create Loader Animation with CSS

A loader is a very useful element for every web project. Basically, we use the loader during page or content loading. When we use Ajax to update parts of a web page, some time needs to get the respective content. At this situation, preloader is a perfect choice for notifying the user to wait.

You can use an image as a preloader or create CSS loader. If you want to make loader animation with CSS, this tutorial will help you to create simple and lightweight loader animation. Here we’ll provide a short CSS code snippet for creating a simple loader with CSS and HTML.

Loader Style 1

The following CSS generates a spinner loader. You can change the loader color and size as per your website layout.

CSS Code:

.loader {
    border-top: 16px solid #4285F4;
    border-right: 16px solid #EA4335;
    border-bottom: 16px solid #FBBC05;
    border-left: 16px solid #34A853;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

HTML Code:

<div class="loader"></div>

Loader Style 2

The following CSS generates an animated loader. You can change the loader color and size as per your website layout.

CSS Code:

.loader, .loader:before, .loader:after {
    background: #000000;
    -webkit-animation: animate 1s infinite ease-in-out;
    animation: animate 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}
.loader {
    color: #000000;
    text-indent: -9999em;
    margin: 88px auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.loader:before, .loader:after {
    position: absolute;
    top: 0;
    content: '';
}
.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader:after {
    left: 1.5em;
}
@-webkit-keyframes animate {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
@keyframes animate {
    0%, 80%, 100% {
          box-shadow: 0 0;
          height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

HTML Code:

<div class="loader"></div>