How can we create a loader in Javascript which waits for a function to end?

Question

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. 

Answer 1

First of all you need to create a loader:

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

</div>

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); }

}

.hide-loader{

display:none;

}

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

     $('#loader').addClass("hide-loader");

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