Install a loader while waiting for a page to load.

I found it thanks to this jsfiddle
https://jsfiddle.net/colas/923xb0tm/1/
But how can I make it start before the page appears for a few milliseconds?
Thanks! ;)

Decidedly... it's good... there was a problem with Dreamweaver.
But how to reduce the loading duration?
Here are my scripts:

<script> $(window).load(function(){ $(".loader").fadeOut("1000"); }) </script> <script> $('.button-class').click(function (){ var btn = $(this); $(btn).buttonLoader('start'); setTimeout(function (){ $(btn).buttonLoader('stop'); }, 5000); }); </script>

Thank you,
LM

Hello,
what do you call a loader?
If you are talking about a progress bar that displays the loading time, you indeed need to go through programming.
_The loader function in jQuery (which is a JavaScript library) does not serve this purpose but is rather used to load content.
https://api.jquery.com/load/

_Your code is incorrect and should display an error in the console.
Indeed, you do not close either the brace of the anonymous function or the parenthesis of the ".load" method, which is used to load content and nothing else.

_To display the loading progress of an element, you need to obtain its total weight in bytes as well as the weight in bytes already loaded. The rest is quite simple from there; if you want a percentage, you apply a rule of three and then display it using the DOM (the virtual representation of the page included in JavaScript which allows access to the elements of the page, for example to remove/add/modify an element such as its content).
If you want to do this for several elements, you will need to make it function.
You can also look at events like "onLoad" (which means "when loading") which allows you to know the loading status (not started, in progress, loaded).
_With jQuery in basic usage, you begin by verifying that the page is loaded (indeed since JavaScript operates within the page itself, if the page is not loaded, there is no JavaScript...) and then include your instructions within the scope of this function.
However, you are not doing this.
Here is how it should be done:

https://learn.jquery.com/using-jquery-core/document-ready/

_Before using jQuery, you must know and be able to use JavaScript because jQuery is just an application of JavaScript (a software library = a file of functions and JavaScript objects), which is sometimes regrettable if it's for a single function, but that is not the point.

_To learn, there is only one solution: roll up your sleeves and work hard.
Good luck then.

Also, be careful that the H1 tag in HTML indicates the title of the page, which is used to reference and index the content of your pages. So, it’s clearly not a good idea to use it otherwise, especially as HTML has plenty of tags for text.

Once you have the basic notions in JavaScript and programming, you can turn to courses and examples on the subject (loading bar and not loader which means loading a file, an image, text, or whatever you want but consists of loading content and not looking at its progress to be able to display a %, circle yes whatever we want that represents the loading progress) like this one which presents a version with jQuery that looks quite similar to what you tried (minus the errors):

https://eticweb.info/tutoriels-javascript/afficher-une-barre-de-chargement-avant-que-la-page-entiere-ne-soit-chargee/

ps: it will mainly be multimedia files (images, sounds, videos) that will take time to load, so you should focus on these files if your page is slow to load. Of course, reducing the size of images or other elements is essential on the web where the majority of users use mobile devices to view pages (so forget about high-quality and large-sized images, it'll be useless in more than half the cases and will just slow down your page load, which might prompt users to simply go to another site because it's too long and in any case will make their navigation unpleasant and will not encourage them to stay on your site to wait, loading bar displayed or not).

Thank you DoctorHow,
You are too sharp for me, who am bad at js and programming. But thanks again for replying.^^
Currently, my loader works on Firefox/Safari/Chrome... but only locally.
Online, the "opaque" div and the loader remain displayed.
Do you have an explanation?
Thanks again,
LM

.custom-loading-spinner { cursor: progress; position: absolute; width: 100%; height: 100%; } .custom-loading-spinner::before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 10001; overflow: hidden; background: white; opacity: 0.6; } .custom-loading-spinner::after { box-sizing: border-box; z-index: 10002; content: ""; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: cf-loading 1s linear infinite; } @keyframes cf-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(window).load(function(){ $(".loader").fadeOut("1000"); }) </script> <script> $('.button-class').click(function (){ var btn = $(this); $(btn).buttonLoader('start'); setTimeout(function (){ $(btn).buttonLoader('stop'); }, 5000); }); </script>