Loading animation help?

Hi guys, 

So I've been trying to get a preloading animation to show up when you first enter the site. 

Here is the link to the code on Codepen https://codepen.io/Boogiesox/pen/MYbWrj

Ive about given up, I can't seem to get it to work on my page. I appreciate any help!! 

Thank you. 

Try adding this to Settings > Advanced > Code Injection > Footer

<div class="progress-bar"></div>
<h1 class="count"></h1>
<script>
  var body = document.querySelector('body'),
    bar = document.querySelector('.progress-bar'),
    counter = document.querySelector('.count'),
    i = 0,
    throttle = 0.7; // 0-1

(function draw() {
  if(i <= 100) {
    var r = Math.random();
    
    requestAnimationFrame(draw);  
    bar.style.width = i + '%';
    counter.innerHTML = Math.round(i) + '%';
    
    if(r < throttle) { // Simulate d/l speed and uneven bitrate
      i = i + r;
    }
  } else {;
    bar.className += " done";
  }
})();
</script>

and this to Code Injection Header

<style>
  @import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300);

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: 'Raleway';
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  top: 50%;
  height: 2px;
  background: #af71af;
}

.done {
  top: 0;
  height: 100%;
  width: 100%;
  transition: all .33s ease;
}

.count {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-weight: 100;
  font-size: 3em;
  margin-top: -1.33em;
  color: #af71af;
}
</style>

Tried adding this to my website and it didn't work: https://ricardomusic.studio

On 5/11/2021 at 12:56 PM, RicardoRMS said:

Tried adding this to my website and it didn't work: https://ricardomusic.studio

Where did you add above code?

Tried adding it to the footer didn't work so I removed it as I wouldn't be able to do it without help. 

This is my url: 

https://ricardomusicstudio.com 

How do I get that loading animation with the percent counting up on my website? 

On 5/15/2021 at 7:25 PM, tuanphan said:

Where did you add above code?

I followed instructions added it to my header and footer didn't work, left it there for you to correct. Url: https://ricardomusicstudio.com/ 

On 6/7/2021 at 4:14 AM, RicardoRMS said:

I followed instructions added it to my header and footer didn't work, left it there for you to correct. Url: https://ricardomusicstudio.com/ 

Can you keep the code? We can check easier

I put the code back up. Waiting for another one of your amazing code solutions 😄

@tuanphan I use my website everyday to run my website I can't leave code up that breaks my websites function for multiple days at a time. Is the fix doable? 

Kindest regards.

7 hours ago, RicardoRMS said:

@tuanphan I use my website everyday to run my website I can't leave code up that breaks my websites function for multiple days at a time. Is the fix doable? 

 

Kindest regards.

You can duplicate the site & add code & share duplicated site url

Thank you I'll do that for next time. I fixed the code now the loading animation runs on the bottom left of my page. I was wondering two things, is there a way I can centre it on the bottom? And is there a way to make it disappear after reaching 100% loaded. 

@tuanphan after fixing the code it broke my seo for H1 headings on every page. I won’t use this code for now. Thank you for your time, you do amazing work.