A loader is a beneficial element for all the projects related to the web. Therefore, we have to use the loader during page or content loading. So, when we use Ajax to update parts of a web page, related content will have to be received for some time. Thus, the preloader is a precise option to notify the user to wait. You can use an image as a preloader, or you can make a CSS loader. If you want to make loader animation with CSS. Therefore, this tutorial will help you to create lightweight and straightforward loader animation. Here we’ll give you a short CSS code snippet to Create Loader Animation with CSS and HTML.

Build an HTML5 Video Player with Custom Controls

Display Loading Image While Page Loads using jQuery and CSS

Accessing Webcam and Capture Image using HTML5 and JavaScript

Loader Style 1

The following CSS will make a spinner loader. So, 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. So, you can change the loader colour 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: