Loading gostoso

style.less

// -----------------
// Colors
// -----------------
@loader-white: #FFFFFF;
@loader-black: #333333;
@loader-red: #EA4335;
@loader-green: #34A853;
@loader-blue: #409AFE;
@loader-yellow: #FBBC05;
@loader-purple: #9C27B0;
@loader-orange: #FF9800;

// -----------------
// Blur size
// -----------------
@loader-blur: 5px;

// -----------------
// Animation duration
// -----------------
@loader-duration: 1.2s;
@loader-animation-type: linear;

// -----------------
// Dots function
// -----------------
.make-dots (@i) when (@i > 0) {  
  @delay: unit(@i / 5, s);
  
  .dot@{i} {
    display: inline-block;
    transform: translateY(-5px);
    animation: dot-jump 0.5s @delay infinite alternate;
  }
  
  .make-dots((@i - 1));
}

.loader-background {
    background-color: rgba(255,255,255, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.group-new {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.simbol-talentrh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 90%;
}

svg.simbol-talentrh {
  z-index: 9;
  padding: 5px;

  .cls-1 {
    fill: @loader-blue;
    stroke: @loader-white;
    stroke-width: 2;
  }

  .cls-2 {
    fill: @loader-white;
  }
}

.circle-block {
  padding: 5px;
  position: absolute;
  top: -5px;
  width: 135px;
  border-radius: 50%;
  height: 135px;
  overflow: hidden;
  filter: blur(@loader-blur);
  transform-origin: center;
  animation: stadium-run @loader-duration @loader-animation-type infinite alternate;

  .circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: 130px;
    filter: blur(20px);
    border-radius: 5px;
    background-color: @loader-blue;
  }
}

.loading-text {
  position: absolute;
  bottom: -25px;
  width: 200px;
  color: @black;
  text-align: left;
  font-size: 20px;
  font-family: sans-serif;
}

.make-dots(3);

@keyframes stadium-run {
  0% {
    transform: rotate(0deg);
    background-color: @loader-orange;
  }
  25% {
    transform: rotate(90deg);
    background-color: @loader-green;
  }
  50% {
    transform: rotate(160deg);
    background-color: @loader-red;
  }
  75% {
    transform: rotate(250deg);
    background-color: @loader-yellow;
  }
  100% {
    transform: rotate(360deg);
    background-color: @loader-purple;
  }
}

@keyframes dot-jump {
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

template.hbs

{{#if (eq type 1)}}
<div class="loader-background">
    <div class="group-new">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="125px" viewBox="0 0 45 45" class="simbol-talentrh">
            <title>Simbolo TalentRh</title>
            <g id="Design">
                <circle class="cls-1" cx="22.5" cy="22.5" r="22.5" />
                <path class="cls-2" d="M26.72,40.28a9.57,9.57,0,0,1-7-3,10.16,10.16,0,0,1-3.19-7.68V7.35a2.51,2.51,0,0,1,.79-1.89,2.58,2.58,0,0,1,1.86-.74h.13a2.57,2.57,0,0,1,1.88.76,2.52,2.52,0,0,1,.77,1.87v9h7A2.7,2.7,0,0,1,31.61,19v.09A2.37,2.37,0,0,1,30.84,21a2.52,2.52,0,0,1-1.88.8H19l3,1.94v5.93a5,5,0,0,0,1.61,3.87,6.47,6.47,0,0,0,3.72,1.39,2.69,2.69,0,0,1,2.65,2.68v.08a2.38,2.38,0,0,1-.77,1.83,2.52,2.52,0,0,1-1.88.8Z"
                />
                <path class="cls-2" d="M15,21.75a2.52,2.52,0,0,1-1.88-.8,2.37,2.37,0,0,1-.77-1.83V19A2.7,2.7,0,0,1,15,16.36h1.47v5.39Z" />
            </g>
        </svg>
        <div class="simbol-talentrh circle-block">
            <div class="circle"></div>
        </div>
        <span class="loading-text">{{text}}
            <span class="dot1">.</span>
            <span class="dot2">.</span>
            <span class="dot3">.</span>
        </span>
    </div>
</div>
{{/if}}