Update the loading animation to utilize a custom image instead

I found a preloader code on this website that rotates fontawesome icons and displays the percentage after a few seconds.

However, I am looking to replace the fontawesome icon with an image but have been unsuccessful in my attempts. Is there a way to easily swap out the icon for an image?

I would appreciate any advice or suggestions on how to achieve this. Thank you!

$(document).ready(function() {
  var counter = 0;

  // Start the changing images
  setInterval(function() {
    if(counter == 9) { 
      counter = 0; 
    }

    changeImage(counter);
    counter++;
  }, 3000);

  // Set the percentage off
  loading();
});

function changeImage(counter) {
  var images = [
    '<i class="fa fa-fighter-jet"></i>',
    '<i class="fa fa-gamepad"></i>',
    '<i class="fa fa-headphones"></i>',
    '<i class="fa fa-cubes"></i>',
    '<i class="fa fa-paw"></i>',
    '<i class="fa fa-rocket"></i>',
    '<i class="fa fa-ticket"></i>',
    '<i class="fa fa-pie-chart"></i>',
    '<i class="fa fa-codepen"></i>'
  ];

  $(".loader .image").html(""+ images[counter] +"");
}

function loading(){
  var num = 0;

  for(i=0; i<=100; i++) {
    setTimeout(function() { 
      $('.loader span').html(num+'%');

      if(num == 100) {
        loading();
      }
      num++;
    },i*120);
  };

}
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

html,body {
  margin: 0;
  padding: 0;
  font-family:'Lato', sans-serif;
}
.loader {
  width: 100px;
  height: 80px;
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  margin: auto;
}
.loader .image {
  width: 100px;
  height: 160px;
  font-size: 40px;
  text-align: center;
  transform-origin: bottom center;
  animation: 3s rotate infinite;
  opacity: 0;
}
.loader span {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}

@keyframes rotate{
  0% {
    transform: rotate(90deg);
  }
  10% {
    opacity: 0;
  }
  35% {
    transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    transform: rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: rotate(-90deg);
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="loader">
  <div class="image">
    <i class="fa fa-codepen"></i>
  </div>
  <span></span>
</div>

htmljquerycssfont-awesomepreloader

Answer №1

Icons in the JS code have been replaced with placeholder Images. Feel free to customize by using your own images. The initial image is located here in the HTML code:

https://i.sstatic.net/7BDqn.png

You have the option to adjust the images (in the JS Code) here:

https://i.sstatic.net/aqwPE.png

The CSS code has a class named "image" with styles position: relative; and bottom: 50px;, positioning the image slightly higher up. You can modify the class based on the images you use

Execute the code snippet to observe:

$(document).ready(function() {
  var counter = 0;

  // Start the changing images
  setInterval(function() {
    if(counter == 9) { 
      counter = 0; 
    }

    changeImage(counter);
    counter++;
  }, 3000);

  // Set the percentage off
  loading();
});

function changeImage(counter) {
  var images = [
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
    '<img src="http://via.placeholder.com/100">',
  ];

  $(".loader .image").html(""+ images[counter] +"");
}

function loading(){
  var num = 0;

  for(i=0; i<=100; i++) {
    setTimeout(function() { 
      $('.loader span').html(num+'%');

      if(num == 100) {
        loading();
      }
      num++;
    },i*120);
  };

}
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

html,body {
  margin: 0;
  padding: 0;
  font-family:'Lato', sans-serif;
}
.loader {
  width: 100px;
  height: 80px;
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  margin: auto;
}
.loader .image {
  width: 100px;
  height: 160px;
  font-size: 40px;
  text-align: center;
  transform-origin: bottom center;
  animation: 3s rotate infinite;
  opacity: 0;
}
.loader span {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}

.image {
  position: relative;
  bottom: 50px;
}

@keyframes rotate{
  0% {
    transform: rotate(90deg);
  }
  10% {
    opacity: 0;
  }
  35% {
    transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    transform: rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: rotate(-90deg);
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="loader">
  <div class="image">
    <img src="http://via.placeholder.com/100">
  </div>
  <span></span>
</div>

HAPPY CODING!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reversing the order of input-group-addon and input in bootstrap on mobile devices

I attempted to adjust the layout of a bootstrap input-group-addon on mobile devices by using two input elements and manipulating their display and visibility properties. From a design standpoint, I achieved the desired result as the input is now positione ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Tips for identifying a scroll down gesture on a touch device with jQuery

I have a method for infinite scroll that is triggered like this: $(window).on('scroll resize load', function() { // execute the infinite scroll method }); It is triggered by these events: scroll resize load However, it does not seem to ...

javascriptjqueryiphoneeventstouch

How to Customize Password Input Fields in HTML

My input field is set to password type, allowing only a six-digit number: <fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" ...

htmlcssinput

Problem encountered in AngularJS CheckBox binding where the checkbox remains unchecked despite the model having a checked value

I am working with AngularJS and have implemented the following code: <div > <input type="checkbox" ng-model="vehicleDetails.selfOwned"> Owned </div> <div> {{vehicleDetails.selfOwned}} </div> The mo ...

htmlangularjs

Tips for implementing a search filter in a select dropdown menu using Angular

I am attempting to enhance my select option list by including a search filter. With numerous options available, I believe that having a search function will make it easier for the user to locate their desired selection. I hope my message is clear despite ...

htmlangularmulti-selectselect-options

How to position ul at the bottom of a fixed div

I have a fixed sidebar with two ul elements. I attempted to position the blue ul at the bottom of the fixed div, but it is not aligning as intended. <div class="sidebar"> <ul style="background:green;"> <li>test</li> <li>test ...

csshtmlpositionalignment

Unleash the potential of a never-ending expansion for grid cells on Canvas

ts: templateStyle = { display: 'grid', 'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)', 'grid-template-rows': '150px auto auto', 'grid-gap ...

htmlcssangulartypescriptcanvas

What techniques can be used to maintain the alignment of an image while the surrounding text changes?

Having trouble aligning my image without affecting its position. When the wind text is hidden (JavaScript not functioning in CodePen), meaning it is not displayed below the temperature, the weather image shifts upwards. I attempted to use 'absolute&ap ...

htmlreactjstwitter-bootstrapcssbootstrap-4

Having trouble viewing the image slider on an HTML webpage

I've been attempting to incorporate an image slider into my personal website on GitHub, but I've encountered some difficulties as the images are not displaying. Interestingly, I can load individual images without using the slider and they show up ...

javascripthtmlslider

Using Jquery to set a delay for a specified variable

I have coded a jQuery timer that updates every second by increasing the inner text of a div by +1. The goal is to create a clock-like effect. However, I want this timer to stop updating after 15 seconds. var count = 0; var updateDiv = setInterval(function ...

jquery

Prevent redundancy by ensuring unique object items are added to an Array

Within my dataset, I have an array of parking objects. Each parking area is structured with 4 floors and each floor has a capacity of 10 spaces for cars. var parking = [ {type:'car',plateNumber:'D555',parkingLevel:L1,parkingNumber:p1 ...

javascriptjqueryangularjs

Is there a way to redirect focus to an object with a lower z-index when working on overlaying a sequence of transparent divs on a map?

Is it possible to give focus to a parent div that contains a child div without hiding the child div? I am integrating the Google Maps API and need to overlay a grid of transparent divs for inserting information. However, with these divs on top of my map, ...

javascriptcssgoogle-maps-api-3jquery

What could be causing the space between float and div elements?

Could someone shed light on the reason behind the minor gap between the top navigation element and the content div underneath it in this jsfiddle? When I float the navigation list items, a slight gap appears between the top navigation element and the main ...

htmlcsscss-float

Error: SyntaxError - Issue with the AJAX request

When attempting to retrieve the HTML of a page using the following ajax request: $.ajax({ type: 'GET', dataType:"jsonp", url: link, success: function(response){console.log(response)}, ...

javascriptjqueryajax

The challenge of Cross-Origin Resource Sharing with AjaxSubmit compared to a traditional Ajax request

My dilemma involves two applications interacting on Google's App Engine, each operating within its own domain. To enable communication between them, I have successfully implemented CORS in Python using the following code: self.response.headers.add_he ...

javascriptjqueryajaxcors

A guide on automating the html5 color picker using input type="color" in selenium webdriver

When interacting with an HTML color input element, a color picker window pops up that prevents viewing the DOM. I am looking for a solution to either select a color and close the window or enter a hex code in the popup's text box. Can anyone provide m ...

javascripthtmlseleniumautomation

Please ensure that the menu is included within the HTML file

How can I include a menu from menu.html into index.html? The content of menu.html is: <li><a href="home.html">Home</a></li> <li><a href="news.html">News</a></li> In index.html, the code is: <!docty ...

javascriptjquery

Incorporating CSS and JS files into a WordPress theme

To incorporate Css & Js files into my website pages, I plan to insert the following code into the functions.php file: function cssjsloading(){ wp_enqueue_style('bootstrap-rtl', get_template_directory_uri() . '/css/bootstrap-rtl.css&apo ...

phpcsswordpresswordpress-theming

Switching the WordPress dropdown menu from a hover function to a click function

Is it possible to modify the WordPress menu dropdown behavior from hover to onclick? I want the menu to appear when an item is clicked, but WordPress currently requires hovering. Below is what I've tried so far, but it has not been successful. Jquery ...

jqueryhtmlcsswordpress

Using PHP to display dynamic data and add it to an HTML element

I have a unique situation where I am storing html elements, specifically <rect> svg elements, as strings in a database. In my PHP code, I retrieve and echo this data: $db = getConnection(); $statement = $db->prepare('SELECT `copy` FROM `dra ...

phpjqueryhtmlajaxsvg