Top-notch loading icon using jquery

Question

Top-notch loading icon using jquery

Recently, I embarked on the journey of learning Javascript and jQuery simultaneously, and to my surprise, it feels quite manageable.

As I delve deeper into creating functions, I am currently working on displaying a loading image. While I initially used one from , I now desire something more dynamic - perhaps an image that changes with each load...

On another note, there is an issue where my loading image sometimes appears beneath other elements without any apparent reason. I am determined to unravel this mystery and make sure it doesn't happen again. Any insights or tips would be greatly appreciated!

Below you can see my current setup:

...
<img id="loading" src="loading.gif" />
...
<script>
function load(){
 $("#loading").fadeToggle();
}
</script>

jquery css html

Answer 1

Answer №1

I found this concept very intriguing and have implemented it in my own projects! Here's how I went about doing it:

Feel free to customize this to suit your preferences, as there are plenty of ways to enhance the aesthetics. However, here is a simple configuration you can start with.

CSS :

.preloader{
    z-index: 1001;  // The higher the value, the more it will be displayed on top. I chose 1001 because I typically don't exceed z-indexes of 1000, but it may vary for you.
}

HTML :

<div class="preloader">
    <img src="images/preloaders/1.png" /> <!-- You can customize the size of the preloader image and apply styles to cover the entire page for a 'modal' effect -->
</div>

Javascript (jQuery) :

<script>
var MAX_PRELOADERS = 5; // How many unique preloaders do you have? Ensure they are named appropriately: 1.png , 2.png ... 5.png (in the correct folder)

function showHidePreloader(){ 
    $(".preloader img").fadeToggle();
}

function changePreloader(){
    var new_preloader = Math.round(Math.random() * MAX_PRELOADERS) + 1; 
    $(".preloader img").attr("src","images/preloaders/"+new_preloader+".png"); // Adjust the path and extension if necessary
}
</script>

By the way, I use this site for preloaders: I highly recommend checking it out as it offers superior options compared to what you currently have. Simply call the changePreloader() function when you want to switch preloaders, and you already know how to use the first function :)

Answer 2

I found this concept very intriguing and have implemented it in my own projects! Here's how I went about doing it:

Feel free to customize this to suit your preferences, as there are plenty of ways to enhance the aesthetics. However, here is a simple configuration you can start with.

CSS :

.preloader{
    z-index: 1001;  // The higher the value, the more it will be displayed on top. I chose 1001 because I typically don't exceed z-indexes of 1000, but it may vary for you.
}

HTML :

<div class="preloader">
    <img src="images/preloaders/1.png" /> <!-- You can customize the size of the preloader image and apply styles to cover the entire page for a 'modal' effect -->
</div>

Javascript (jQuery) :

<script>
var MAX_PRELOADERS = 5; // How many unique preloaders do you have? Ensure they are named appropriately: 1.png , 2.png ... 5.png (in the correct folder)

function showHidePreloader(){ 
    $(".preloader img").fadeToggle();
}

function changePreloader(){
    var new_preloader = Math.round(Math.random() * MAX_PRELOADERS) + 1; 
    $(".preloader img").attr("src","images/preloaders/"+new_preloader+".png"); // Adjust the path and extension if necessary
}
</script>

By the way, I use this site for preloaders: I highly recommend checking it out as it offers superior options compared to what you currently have. Simply call the changePreloader() function when you want to switch preloaders, and you already know how to use the first function :)

Top-notch loading icon using jquery

Answer №1

Similar questions

What could be causing the misalignment between the desired output and the response from the AJAX request

Display subpages of WordPress site in a dropdown menu on the navigation bar

validating jQuery on multiple form fields

Form-box powered by jQuery Ajax

Challenges of implementing an infinite scroll feature using PHP, jQuery, MySQL, and AJAX

Tips for creating a dynamic variable for an object key in jQuery to streamline your code

Using PHP variables in HTML frameset URL for dynamic content passing

Generate a PDF document on the user's device

The execution of jQuery was hindered due to the implementation of PHP include

Performing automatic submission of form data without needing to redirect or refresh the page using Javascript

Executing a parent window function from a child window using AngularJS

Validating and submitting forms using AJAX

The settings of the button return to their default state once it is clicked on

When a jQuery accordion panel is opened or closed, trigger additional code to run

Create a one-page website that utilizes the jQuery load() function

Aligning three hyperlinks evenly to spread across the webpage

Incorporating Dynamic Javascript: A Step-by-Step Guide

Using the HTML <span> and svg elements together does not allow them to be inline with each other

Enhance the appearance of your image by adding a stylish frame or border without altering its

Show 1 Blog Post on a Separate AngularJS Page