The Characters Box Loading Effects and Animation

Creative characters box loading effects and animation using CSS and Javascript.

Feb 13, 2019

The Characters Box Loading Effects and Animation

Are you excited about the loader box effects featuring loading characters? Well, you’re in for a treat with this article!

Within the following sections, we’re excited to unveil a variety of captivating box/character loader animation effects created using the powerful combination of CSS and JavaScript. These effects are dynamic and highly customizable.

Some 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.

Let’s create an core HTML structure.

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 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.loading-characters.effect-fade span {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.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 0.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 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.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);
  }
}

Enjoy the loader effects showcased in this article and let your creativity shine! Thakns for reading!

Demo Download

Back to snippets