Use Spinner and Create Page Loader in Bootstrap 5

[@ByteGrad]

Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2 Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752

[@alancameron1478]

Thanks for the tutorial. The only problem I have with this approach is that the spinner only appears on page load but there's a ton of stuff happening before page loading so ideally the spinner should appear on the click event and spin until the page loads. A tutorial on that would be much appreciated by many.

[@krypton1981]

Excellent video. I was able to handle the alignment of the spinner without using CSS, leveraging the utilities from Bootstrap.

[@user-cool839]

🔥🔥🔥🔥🔥 Thank you, man!

[@DevAfangideh]

mann this was so helpful

[@increment-]

Great video, thank you!

[@anthonydoumanis8138]

Brilliant!

[@fahrulikhsanhidayatullah]

thanks!

[@ayandavilakazi590]

is the javascript course available on udemy business

[@ByteGrad]

Not yet I think, sorry

[@insamegamerff9522]

how can i make a blur screen instead of this black screen ?

[@giddianirodriguez]

Is this working for responsive?, when i was testing it on my cellphone, the spinner appears but dont't cover the full screen, just a row in the top

[@giddianirodriguez]

Nevermind, it was cache lol

[@blackpurple9163]

Using this same js and transition, we can make our own custom pre-loading animations right? Btw if we wish to remove the loader only after the page is loaded, how can we do that since setting a timeout means it'll finish the animation and go to display none regardless of whether the site has started rendering or not, so in that case I'm assuming I use if-else, so if html loads, then set timeout occurs, but if html isn't loaded yet (because the user's internet speed is unbearably slow, like mine is sometimes, happens a lot with me) the loader keeps showing the animation

[@ByteGrad]

You would use something like window.addEventListener(‘DOMContentLoaded’, () => { CODE TO REMOVE PAGE LOADER HERE }) It is shown later in video

[@atufamin2002]

Please make small videos

[@ArumaMoon]

What if I want the spinner to be executed when the database is called through a button? I'd appreciate your help.

[@ByteGrad]

You would need to add an event listener for the button element listening for a ‘click’ event, then in the function write code that displays a spinner