Jump to content

Loading animation help?

Recommended Posts

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. 

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.