Loading Animation using HTML CSS and Javascript

In today's era, creating engaging user experiences is very crucial. One way to increase the user engagement is by incorporating custom loading animations.  In this post, we will walk you through the process of creating a professional loading animation using HTML, CSS and JavaScript. By the end of this post, you will have a better understanding of how to use these technologies to build a custom professional loader. 

Must Read: Realistic Candle Animation using HTML and CSS only

 Below is the code snippet of HTML structure of custom loader, go through it and build it now.

<div class="main-container">
    <div class="loader">
        <div class="outer"></div>
        <div class="inner">
            <div class="count"></div>
            <div class="text">Loading...</div>
        </div>
    </div>
</div>

In this HTML structure, we have a main container with the class 'main-container'. Within that container, we have defined two main sections inside the loader i.e. the outer and the inner content. The loader section contains a 'div' with the class 'outer', which will serve as the outer circle of the loading animation. The inner section holds the count value and the loading text.

{ads}

Below is the code snippet for the CSS code of custom loading animation.

.main-container {
    display: flex;
    min-height: 100vh;
    min-width: 300px;
    justify-content: center;
    font-family: 'calibri';
    align-items: center;
}

.loader {
    min-width: 250px;
    height: 250px;
    font-family: calibri;
    display: flex;
    align-items: center;
    justify-content: center;
}

.outer {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 100%;
    animation: loading_animation .7s linear infinite;
    box-shadow: inset 0px 0px 20px 7px #000000a6, inset 0px 0px 20px 1px #00000066, inset 0px 0px 0px 30px #ffffff91;
}

.inner {
    color: white;
    font-size: 2rem;
    position: absolute;
    font-style: italic;
    text-align: center;
}

.text {
    font-size: 1rem;
}

.outer::before,
.outer::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(3px);
    border-radius: 100%;
    box-sizing: border-box;
    border-left: 10px solid #ffffffd1;
    border-right: 10px solid #ffffffd1;
}

.outer::after {
    left: 50%;
    top: 50%;
    width: 80%;
    height: 80%;
    filter: blur(6px);
    transform: translate(-50%, -50%);
    border: 10px solid #000000;
}

@keyframes loading_animation {
    to {
        transform: rotate(360deg);
    }
}

Below is the code snippet of JavaScript code. In this, we have created a counter that increments every second and displays the count within the 'count' element.

let value = 0;
setInterval(() => {
    document.querySelector('.count').innerText = value + '%';
    (value < 100) ? value++ : value = 0;
}, 100)

Creating a custom loading animaiton can significantly enhance the user experience of your web application. By combining HTML, CSS and JS, you have the power to create unique and engaging loading components that captivate your users during short wait times.

Must Read: Custom Play Button animation using HTML and CSS only

Feel free to experiment with the provided code and let us know your thoughts in the comment section.

Download