Loader Effects with Box/Characters in CSS

 Techmates  13 Feb, 2018


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 a beautiful 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 Structure

 <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 Styles

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

Javascript

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

To run this script you must have to include the jQuery library.

Hope you guys like this demo and use it in your own projects.


Other Resources/3rd Party Libraries

  • jQuery