✓ Loaders

Loader animation – Logo univerzal

Používame pri načítavaní stránky / aplikácie

css :

.component__loader {
  animation: opacity_in_out 1.8s linear infinite;
}

@keyframes opacity_in_out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

Loader overovanie údajov

Používame pri čakaní na overovanie údajov

css :

.component__loader {
  animation: opacity_in_out 1.8s linear infinite;
}

@keyframes opacity_in_out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

.component__loader-txt{
  ._dots {
    span:nth-child(2) {
      animation: blink2 1s infinite steps(1);
    }

    span:nth-child(3) {
      animation: blink3 1s infinite steps(1);
    }
  }
}
// Animácie
@keyframes blink2 {
  0% { opacity: 0; }
  33% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes blink3 {
  0% { opacity: 0; }
  66% { opacity: 1; }
  100% { opacity: 1; }
}