Loader Effects with Box/Characters in CSS

Beautiful Loader Box/Characters Animation in CSS

 Techmates    13 Feb, 2018    1064

Welcome guys, are you inquisitive to find beautiful loader box(loading characters) effect? Then this article is for you.

In this article, we'd love to share box/character loader animation effects using CSS and JS with you.

This effect is fully dynamic  & customized. You can manage the loading speed change the animation etc... using the data- attributes.

List of the data- attributes to customize the effect.

  • dd-effect="{class-name}" to change the animation effect.
  • dd-transition-time="{time in ms}" to change the animation/transition time.
  • dd-remove-done-animated="{true/false}" to remove the animated elements.

Follow the code to create the loaders.

 

HTML

<div class="loading-characters padding-tb-l" dd-effect="layer" dd-remove-done-animated="false"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="fade"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l" dd-effect="up-down"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="rotate-lf" dd-remove-done-animated="false" dd-transition-time="700"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="left-right" dd-remove-done-animated="false"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="zoom-in" dd-remove-done-animated="false" dd-transition-time="300"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="zoom-out" dd-remove-done-animated="false" dd-transition-time="300"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>

 

CSS

.loading-characters.ovn span {
	opacity: 0;
	visibility: hidden;
}
.loading-characters span {
	position: relative;
	display: inline-block;
	padding: 10px;
	background: darkred;
	font-size: 30px;
	width: 30px;
	margin: 0 3px;
	color: #fff;
	border-radius: 3px;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.loading-characters.effect-fade span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(.9);
	   -moz-transform: scale(.9);
	    -ms-transform: scale(.9);
	     -o-transform: scale(.9);
	        transform: scale(.9);
}
.loading-characters.effect-fade span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.loading-characters.effect-layer span.active {
	background: #3D84D6;
}
.loading-characters.effect-up-down span {
	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
	        opacity: 0;
}
.loading-characters.effect-up-down span.active {
	opacity: 1;
/*	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
*/	animation: upDownAnimation 2s ease-in-out;
}

@keyframes upDownAnimation {
	0% {
		-webkit-transform: translateY(-50px);
		   -moz-transform: translateY(-50px);
		    -ms-transform: translateY(-50px);
		     -o-transform: translateY(-50px);
		        transform: translateY(-50px);
	}
	50% {
		-webkit-transform: translateY(-5px);
		   -moz-transform: translateY(-5px);
		    -ms-transform: translateY(-5px);
		     -o-transform: translateY(-5px);
		        transform: translateY(-5px);
	}
	100% {
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
		    -ms-transform: translateY(0);
		     -o-transform: translateY(0);
		        transform: translateY(0);
	}
}

.loading-characters.effect-left-right span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate(-25px);
	   -moz-transform: translate(-25px);
	    -ms-transform: translate(-25px);
	     -o-transform: translate(-25px);
	        transform: translate(-25px);
}
.loading-characters.effect-left-right span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate(0);
	   -moz-transform: translate(0);
	    -ms-transform: translate(0);
	     -o-transform: translate(0);
	        transform: translate(0);
}


.loading-characters.effect-rotate-lf span {
	opacity: 0;
	visibility: hidden;
}
.loading-characters.effect-rotate-lf span.active {
	opacity: 1;
	visibility: visible;
	animation: rotateLoadingEffect .75s ease-in-out;
}

@keyframes rotateLoadingEffect {
	0% {
		-webkit-transform: rotate(0deg);
		   -moz-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		     -o-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	75% {
		-webkit-transform: rotate(390deg);
		   -moz-transform: rotate(390deg);
		    -ms-transform: rotate(390deg);
		     -o-transform: rotate(390deg);
		        transform: rotate(390deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		   -moz-transform: rotate(360deg);
		    -ms-transform: rotate(360deg);
		     -o-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}


.loading-characters.effect-zoom-in span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}
.loading-characters.effect-zoom-in span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.loading-characters.effect-zoom-out span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(4);
	   -moz-transform: scale(4);
	    -ms-transform: scale(4);
	     -o-transform: scale(4);
	        transform: scale(4);
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.loading-characters.effect-zoom-out span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

 

Transition JS

// var total_length = $('.loading-characters span').length;
var transition_time;
$('.loading-characters').each(function() {
	var count = 0;
	var effect = 'effect-'+$(this).attr('dd-effect');
	var total_length = $(this).children('span').length;
	var transition_time = ( $(this).attr('dd-transition-time') == undefined ? 500 : Number($(this).attr('dd-transition-time')));
	$(this).addClass('effect-'+$(this).attr('dd-effect'));
	loadingEffect(count, effect, transition_time, total_length);
});
// loadingEffect(count);
function loadingEffect(count, effect, transition_time, total_length) {
	if( count < total_length ) {
		count++;
		setTimeout(function() {
			$('.loading-characters.'+effect+' span:nth-child('+count+')').addClass('active');
			loadingEffect(count, effect, transition_time, total_length);
		}, transition_time);
		setTimeout(function() {
			if( $('.loading-characters.'+effect).attr('dd-remove-done-animated') != 'false' ) {
				$('.loading-characters.'+effect+' span:nth-child('+(count - 1)+')').removeClass('active');
			}
		}, transition_time);
	} else {
		setTimeout(function() {
			$('.loading-characters.'+effect+' span').removeClass('active');
		}, transition_time);
		count = -1;
		loadingEffect(count, effect, transition_time, total_length);
	}
}

 


Credits / Resources

  • jQuery



Related Snippets