0 votes
1 view
in Web Technology by (2.3k points)

My javascript function takes a lot of time to commit. What I want is that whenever the function is being processed, the browser should display a loader to give users a signal to wait for the loading. 

1 Answer

0 votes
ago by (4.4k points)

First of all you need to create a loader:

<div class="loader" id="loader">


Now add loader class in CSS:

 .loader {

    border: 16px solid #f3f3f3; /* Light grey */

    border-top: 16px solid #3498db; /* Blue */

    border-radius: 50%;

    width: 120px;

    height: 120px;

    animation: spin 2s linear infinite;


@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }





This code you need to add in JS file when your function executes completely, hide the loader. 


If you want to go deep into web development, you can go through courses provided by Intellipaat from here.

Welcome to Intellipaat Community. Get your technical queries answered by top developers !