Square Loading animation for Website

Square Loading animation for website

Hey ? … Welcome to Dropinks. After long time updated the tutorial to reduce bounce rate of your website using CSS3 Animation, for page loading called square loading animation.

Why is Loading Time mandatory for your viewers?

Most of the viewers want to wait for the page loading more than 2 seconds. in which 47% of users expect a web page or an app to load in 2 seconds or less. After 4 seconds, Users starts getting frustrated and after 8 seconds, they leave. In fact, a one-second delay in your site will change the customer rate.
So Loading time is mandatory for the success of your site, app and if you can keep the user engaged for those few seconds/milliseconds, even better. We tried small loading animation for the website.

Concepts Used:

  • HTML
  • Javascript
  • CSS3 Animation

How is it working?

Loading animation is working using animation-delay in CSS3 animation. Here each element has two animations delays one is for forwarding movement and another is backward movement. Once forward animation is completed using animation-delay event in javascript reset the animation delay and adding based on direction for all loading elements. Let see the code below.

CSS3 Animation

.loading.forward_loading{animation: forward_loading 400ms ease 1 forwards; transform-origin: center; transform: translateX(0px) rotate(0deg);}
@keyframes forward_loading{
  0%{transform: translateX(0px) rotate(0deg);}
  100%{transform: translateX(30px) rotate(90deg);}
}
.loading.reverse_loading{animation: reverse_loading 400ms ease 1 forwards; transform-origin: center; transform: translateX(30px) rotate(90deg)}
@keyframes reverse_loading{
  0%{transform: translateX(30px) rotate(90deg);}
  100%{transform: translateX(0px) rotate(0deg);}
}

Add animation delay and stagger delay Code

function addDelay(){
	var each_delay = stagger_delay;
	var j=0;
	var index_count = 0;
	for(var i=loading_length; i>=0; i--) {
		var delay_forward = anim_delay+(each_delay*j);
		var elem_array_ind;
		if((i+1)%n_cols == 0){
			elem_array_ind = index_count + n_cols;
			index_count = elem_array_ind;
		}
		else{
			elem_array_ind -= 1;
		}
		j++;
		loading_div[i].style.animationDelay = delay_forward+"ms";
		loading_div[i].setAttribute('data-forward', delay_forward);
		loading_div[elem_array_ind-1].setAttribute('data-reverse', delay_forward);
		loading_div[i].classList += " forward_loading";
		if(i === 0){
			loading_div[i].addEventListener("animationend", play_loading);
		}
	}
	forward = false;
}

Play animation

function play_loading(obj){
	obj.target.removeEventListener("animationend", play_loading);
	if(!forward){
		for(var i=0; i<=loading_length; i++) {
			var elm = loading_div[i];
			var delay_time = parseInt(elm.getAttribute("data-reverse"));
			elm.style.animationDelay = delay_time+"ms";
			elm.classList.remove("reverse_loading")
			elm.classList.remove("forward_loading")
			elm.classList += " reverse_loading";
			if(i === loading_length){
				loading_div[i].addEventListener("animationend", play_loading);
			}
		}
		forward = true;
	}
	else{
		for(var i=0; i<=loading_length; i++) {
			var elm = loading_div[i];
			var delay_time = parseInt(elm.getAttribute("data-forward"));
			elm.style.animationDelay = delay_time+"ms";
			elm.classList.remove("reverse_loading")
			elm.classList.remove("forward_loading")
			elm.classList += " forward_loading";
			if(i === 0){
				loading_div[i].addEventListener("animationend", play_loading);
			}
		}
		forward = false;
	}
}

demo

Thank you for reading this tutorial, and if you have any question or related work to show, please do. 🙂

You may also like