7

I have a function in Javascript (in the browser, not node.js) that it takes a lot of time to commit. I want that while the function is being processed, the browser will present a loader, so the user can understand that he/she has to wait.

CrazySynthax
  • 13,662
  • 34
  • 99
  • 183
  • 2
    Possible duplicate of [How to show Page Loading div until the page has finished loading](http://stackoverflow.com/questions/1853662/how-to-show-page-loading-div-until-the-page-has-finished-loading) – thepio Sep 28 '16 at 11:17
  • That's a good thing to want for your end users - how have you tried to solve this dilemma yourself? Any simple re**search** at all? – Jaromanda X Sep 28 '16 at 11:25
  • I tried to use onload() function by $(window).onload(functino() { ... } and I got an error: "upload.js:172 Uncaught TypeError: $(...).onload is not a function" – CrazySynthax Sep 28 '16 at 11:36

2 Answers2

16

create a loader first :

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

Then add the loader class in your CSS(css file of your loader class) :

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

Add this js code to your JS file after your function executes completely,just hide the loader.

     $('#loader').addClass("hide-loader");
Akshay Tilekar
  • 1,910
  • 2
  • 12
  • 22
1

I changed it full vanilla js without creating div and style sheet. https://github.com/AmagiTech/JSLoader

<p>asd sadasdasdasdasda</p>
<script src="https://cdn.jsdelivr.net/gh/AmagiTech/JSLoader/amagiloader.js"></script>
<script>
 AmagiLoader.show();
 setTimeout(() => {
    AmagiLoader.hide();
 }, 3000);
</script>
Muharrem Barkın
  • 23
  • 5