Animation while page loads

Support
#1

Hi!

I’m trying to set up something similar to what you can achieve with these plugins, so I can show a nice widget for 2 seconds or so while my website loads:


I followed these guides:


You can see a demo here:

https://ihatetomatoes.net/demos/css3-preloader-transition/

My only issue is that the animation gets stopped the moment the content of my website starts loading and I’m not being able to manually set a the amount of time that I need the animation to be displayed.

I added this HTML code on a “Content Area” element:

<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>

This CSS on the corresponding CSS section:

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 100001;
}

#loader:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #e74c3c;
	-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
	animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #f9c922;
	-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
	animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

#loader-wrapper .loader-section {
	position: fixed;
	top: 0;
	width: 51%;
	height: 100%;
	background: #222222;
	z-index: 100000;
	-webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
	-ms-transform: translateX(0);  /* IE 9 */
	transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
	left: 0;
}

#loader-wrapper .loader-section.section-right {
	right: 0;
}

/* Loaded */
#loader-wrapper.loader-section.section-left.loaded {
	-webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateX(-100%);  /* IE 9 */
			transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
			transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

#loader-wrapper.loader-section.section-right.loaded {
	-webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateX(100%);  /* IE 9 */
			transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

#loader.loaded {
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;  
			transition: all 0.3s ease-out;
}
#loader-wrapper.loaded {
	visibility: hidden;

	-webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateY(-100%);  /* IE 9 */
			transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.3s 1s ease-out;  
			transition: all 0.3s 1s ease-out;
}

And this JQuery on the corresponding JS section:

jQuery(document).ready(function sh_loader_timeout() {
	setTimeout(function(){
		jQuery('#loader').addClass('loaded');
    jQuery('#loader-wrapper').addClass('loaded');
	}, 4000);
});

(Yes, 4 seconds is much but it’s just to try it out).

Here you can see my test site, where the loading animation shows itself for just a fraction of a second:

https://pruebasweb.sectorhosting.com/

I hope you can help me!

Thanks!

#2

Hi @dgaletti,

Thanks for reaching out.

It looks possible but we can’t provide customization here in the forum. I recommend consulting it to a developer. Maybe what’s left in your code is detection if it’s really loaded or not. What you applied is just 4 seconds delay, what if it loads after or slower depending on internet connection?

Thanks!

#3

Hi!

If you check my test site (https://pruebasweb.sectorhosting.com/) with Chrome, you can see that the console shows no errors and that the JQuery code was correctly loaded.

The code is fine and thoroughly tested by the guy that made the posts I linked, but it was not developed to work with your theme, so I was hopping you could tell me how to make your theme (Pro) not override this timeout (what seems to be happening).

I’m REALLY new to JS and JQuery, so I might not be realizing that your theme has nothing to do with this “override” (it may be a Wordpress-related thing). I would appreciate if someone could point me in the right direction.

Thanks!

#4

Hello There,

Inserting the code in the content area element is not a good idea. Please remove it first.

And then, you’ll need to load the code first before any of the elements that is part of the theme. Since the child theme is set up, please add the following code in your child theme’s functions.php file

// Add loader
// =============================================================================
function add_loader(){ ?>

  <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
  </div>

<?php }
add_action('x_before_masthead_begin', 'add_loader');

// =============================================================================

And you might need to update your JS code as well.

(function($){
  function sh_loader_timeout() {
    setTimeout(function(){
      jQuery('#loader').addClass('loaded');
      jQuery('#loader-wrapper').addClass('loaded');
    }, 4000);
  });

  $(window).on('load', function(){
    sh_loader_timeout();
  });
})(jQuery);

Hope this helps.

1 Like
#5

Not only this worked perfectly, you greeted me like the all-mighty Kenobi, so you made my night x2.

Thank you!

#6

Perfect! Glad that we could be of a help :slight_smile:

1 Like
#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.