1

I was trying to make somehow similar page loader to the one in THIS codepan. What bothers me and was trying to solve on my own, was the use of what I guess are jQuery commands of some sort, the dollar signs ($). I was trying to write the code in plain JavaScript but the code won't work (as I guess I messed up something) Below are the JavaScript w/ jQuery and plain Javascript (that I made):

Original code, with JavaScript and fragments of jQuery

$(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;
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  animation: 3s rotate infinite;
  -webkit-animation: 3s rotate infinite;
  -moz-animation: 3s rotate infinite;
  -ms-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);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
  10% {
    opacity: 0;
  }
  35% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    transform: rotate(0deg); 
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
  }
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
  <div class="image">
    <i class="fa fa-codepen"></i>
  </div>
  <span></span>
</div>

My code with plain JavaScript (not even close to complete I guess)

document.addEventListener("DOMContentLoaded", function() {
  var counter = 0;

  // Start the changing images
  setInterval(function() {
    if(counter == 4) { 
      counter = 0; 
    }
    changeImage(counter);
    counter++;
  }, 3000);
  // Set the percentage off
  loading();
});

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

  document.getElementsByClassName("loader", "image").innerHTML = ("" + images[counter] + "");
}

function loading(){
  var num = 0;
  for(i=0; i<=100; i++) {
    setTimeout(function() { 
      document.getElementsByClassName("spaner").innerHTML= (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;
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  animation: 3s rotate infinite;
  -webkit-animation: 3s rotate infinite;
  -moz-animation: 3s rotate infinite;
  -ms-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);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
  10% {
    opacity: 0;
  }
  35% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
  }
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
  <div class="image">
    <i class="fa fa-codepen"></i>
  </div>
  <span class="spaner"></span>
</div>

Any help would be much appreciated.

Improve this question
6
  • developer.mozilla.org/en-US/docs/Web/API/Document/… names is a string representing the list of class names to match; class names are separated by whitespace so a single parameter, space separated, not multiple parameters. Also $(".loader .image") is find loader then find child image of those loaders Commented Feb 11, 2019 at 9:56
  • Please take the tour and learn how to ask a good question. It isn't very helpful to just tell us something doesn't work. Provide a clear problem statement. Commented Feb 11, 2019 at 9:58
  • As mentioned at the start, my problem is that I am aiming on similar loader for page but am trying to keep it in plain JavaScript, while the first code has jQuery in it. Don't want to sound rude or anything, but I think that this already points out the obvious "question" / problem, don't you think, @Quentin ? Commented Feb 11, 2019 at 10:00
  • 2
    codepen.io/anon/pen/YBamPo?editors=1111 Commented Feb 11, 2019 at 10:03
  • @AshokVishwakarma, thanks for the comment, I am waiting for the time limit to set the answer below as correct / helpful. Anyway, I do still appreciate your effort :) Commented Feb 11, 2019 at 10:05

2 Answers 2

Reset to default
4

There are few issues in your code.

To use multiple selector, you can try querySelector():

document.querySelector(".loader .image").innerHTML = ("" + images[counter] + "");

getElementsByClassName() returns collection, you have to use proper index:

document.getElementsByClassName("spaner")[0].innerHTML= (num + '%');

Try the following:

document.addEventListener("DOMContentLoaded", function() {
  var counter = 0;

  // Start the changing images
  setInterval(function() {
    if(counter == 4) { 
      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>'
  ];

  document.querySelector(".loader .image").innerHTML = ("" + images[counter] + "");
}

function loading(){
  var num = 0;

  for(i=0; i<=100; i++) {
    setTimeout(function() { 
      document.getElementsByClassName("spaner")[0].innerHTML= (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://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
  <div class="image">
    <i class="fa fa-codepen"></i>
  </div>
  <span class="spaner"></span>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Unlike jQuery, that has the same API working on a single element as well as a jQuery collection of elements, the DOM API requires you to explicitly iterate over NodeList/HTMLCollection objects.

Aside from that, instead of collecting all elements that have class loader and add to that list all elements that have class image you want to use querySelectorAll.

document.addEventListener("DOMContentLoaded", function() {
  var counter = 0;

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

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

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

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

  [...document.querySelectorAll(".loader .image")].forEach((loader) => {
    loader.innerHTML = images[counter];
  })
}

function loading(){
  var num = 0;

  for(i=0; i<=100; i++) {
    setTimeout(function() { 
      [...document.getElementsByClassName("spaner")].forEach((spaner) => {
      spaner.innerHTML = 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://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
  <div class="image">
    <i class="fa fa-codepen"></i>
  </div>
  <span class="spaner"></span>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.