Loader Effects with Box/Characters in CSS

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);
	}
}