Egypt59 Posted April 5, 2021 Share Posted April 5, 2021 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
tuanphan Posted April 10, 2021 Share Posted April 10, 2021 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
RicardoRMS Posted May 11, 2021 Share Posted May 11, 2021 Tried adding this to my website and it didn't work: https://ricardomusic.studio Link to comment
tuanphan Posted May 16, 2021 Share Posted May 16, 2021 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
RicardoRMS Posted June 2, 2021 Share Posted June 2, 2021 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? Link to comment
RicardoRMS Posted June 6, 2021 Share Posted June 6, 2021 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/ Link to comment
tuanphan Posted June 8, 2021 Share Posted June 8, 2021 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
RicardoRMS Posted June 8, 2021 Share Posted June 8, 2021 I put the code back up. Waiting for another one of your amazing code solutions 😄 Link to comment
RicardoRMS Posted June 10, 2021 Share Posted June 10, 2021 @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. Link to comment
tuanphan Posted June 10, 2021 Share Posted June 10, 2021 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
RicardoRMS Posted June 10, 2021 Share Posted June 10, 2021 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. Link to comment
RicardoRMS Posted June 10, 2021 Share Posted June 10, 2021 @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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment