Create Loader Animation HTML with CSS

Loading animations are notifications that reassure users that the system is still handling their requests. When a user clicks on a link or button, the animation is displayed until the load process is complete.
A loader is a helpful component for each web venture. Essentially, we utilize the loader during page or substance stacking. At the point when we use Ajax to refresh portions of a page, some time needs to get the particular substance. In the present circumstance, a preloader is an ideal decision for informing the client to stand by.

You can utilize a picture as a preloader or make a CSS loader. On the off chance that you need to make a loader activity with CSS, this instructional exercise will assist you with making basic and lightweight loader liveliness. Here we’ll give a short CSS code scrap for making a basic loader with CSS and HTML.

Loader Style 1

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>