arlet-loadding/ArletLoadding.css

Un componente de indicador de carga con múltiples animaciones personalizables.

.arlet-loaddign {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  pointer-events: none;
}
.arlet-loaddign .text_arlet-loadding {
  color: #fff;
  font-size: 15px;
  margin-top: 10px;
}
.arlet-loaddign.circles-type .spin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.circles-type .spin-center {
  position: relative;
  width: 80px;
  height: 80px;
}
.arlet-loaddign.circles-type .spin-center__circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.arlet-loaddign.circles-type .spin-center__circle:nth-child(1) {
  border-top-color: #3498db;
}
.arlet-loaddign.circles-type .spin-center__circle:nth-child(2) {
  width: 70%;
  height: 70%;
  border-width: 3px;
  border-top-color: #e74c3c;
  animation: spin 1.2s linear infinite reverse;
}
.arlet-loaddign.circles-type .spin-center__circle:nth-child(3) {
  width: 60%;
  height: 60%;
  border-width: 2px;
  border-top-color: #f1c40f;
  animation: spin 1.4s linear infinite;
}
.arlet-loaddign.circles-type .spin-center__circle:nth-child(4) {
  width: 50%;
  height: 50%;
  border-width: 2px;
  border-top-color: #2ecc71;
  animation: spin 1.6s linear infinite reverse;
}
.arlet-loaddign.circles-type .spin-center__circle:nth-child(5) {
  width: 40%;
  height: 40%;
  border-width: 1px;
  border-top-color: #9b59b6;
  animation: spin 1.8s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.arlet-loaddign.bubbles-type .spin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.bubbles-type .spin-center {
  position: relative;
  width: 80px;
  height: 80px;
}
.arlet-loaddign.bubbles-type .spin-center__circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: bubbles 1s linear infinite;
}
.arlet-loaddign.bubbles-type .spin-center__circle:nth-child(1) {
  background-color: #3498db;
}
.arlet-loaddign.bubbles-type .spin-center__circle:nth-child(2) {
  width: 70%;
  height: 70%;
  background-color: #e74c3c;
  animation: bubbles 1.2s linear infinite reverse;
}
.arlet-loaddign.bubbles-type .spin-center__circle:nth-child(3) {
  width: 60%;
  height: 60%;
  background-color: #f1c40f;
  animation: bubbles 1.4s linear infinite;
}
.arlet-loaddign.bubbles-type .spin-center__circle:nth-child(4) {
  width: 50%;
  height: 50%;
  background-color: #2ecc71;
  animation: bubbles 1.6s linear infinite reverse;
}
.arlet-loaddign.bubbles-type .spin-center__circle:nth-child(5) {
  width: 40%;
  height: 40%;
  background-color: #9b59b6;
  animation: bubbles 1.8s linear infinite;
}
@keyframes bubbles {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
.arlet-loaddign.rotating-diamonds-type .spin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.rotating-diamonds-type .spin-center {
  position: relative;
  width: 60px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.rotating-diamonds-type .spin-center__circle {
  position: absolute;
  width: 15px;
  height: 15px;
  transform-origin: center;
}
.arlet-loaddign.rotating-diamonds-type .spin-center__circle:nth-child(1) {
  left: 0px;
  background-color: #3498db;
  transform: rotate(0deg) translateY(0px);
  animation: rotating-diamonds-1 1.5s linear infinite;
}
.arlet-loaddign.rotating-diamonds-type .spin-center__circle:nth-child(2) {
  left: 15px;
  background-color: #e74c3c;
  transform: rotate(90deg) translateY(0px);
  animation: rotating-diamonds-2 1.5s ease-in-out infinite;
}
.arlet-loaddign.rotating-diamonds-type .spin-center__circle:nth-child(3) {
  left: 30px;
  background-color: #f1c40f;
  transform: rotate(180deg) translateY(0px);
  animation: rotating-diamonds-3 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.arlet-loaddign.rotating-diamonds-type .spin-center__circle:nth-child(4) {
  left: 45px;
  background-color: #2ecc71;
  transform: rotate(270deg) translateY(0px);
  animation: rotating-diamonds-4 1.5s ease-in-out infinite;
}
@keyframes rotating-diamonds-1 {
  0% {
    transform: rotate(0deg) translateY(0px);
  }
  50% {
    transform: rotate(180deg) translateY(-20px);
  }
  100% {
    transform: rotate(360deg) translateY(0px);
  }
}
@keyframes rotating-diamonds-2 {
  0% {
    transform: rotate(90deg) translateY(0px);
  }
  50% {
    transform: rotate(270deg) translateY(-20px);
  }
  100% {
    transform: rotate(450deg) translateY(0px);
  }
}
@keyframes rotating-diamonds-3 {
  0% {
    transform: rotate(180deg) translateY(0px);
  }
  50% {
    transform: rotate(360deg) translateY(-20px);
  }
  100% {
    transform: rotate(540deg) translateY(0px);
  }
}
@keyframes rotating-diamonds-4 {
  0% {
    transform: rotate(270deg) translateY(0px);
  }
  50% {
    transform: rotate(450deg) translateY(-20px);
  }
  100% {
    transform: rotate(630deg) translateY(0px);
  }
}
.arlet-loaddign.expanding-pulses-type .text_arlet-loadding {
  transform: translateY(30px);
}
.arlet-loaddign.expanding-pulses-type .spin-center__circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e74c3c;
  transform-origin: center;
  animation: expanding-pulses 1.5s ease-in-out infinite;
}
@keyframes expanding-pulses {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
.arlet-loaddign.zigzag-lines-type .spin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.zigzag-lines-type .spin-center__circle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f1c40f;
  animation: zigzag-lines 1s ease-in-out infinite;
}
.arlet-loaddign.zigzag-lines-type .spin-center__circle:nth-child(1) {
  animation-delay: 0s;
  background-color: #3498db;
}
.arlet-loaddign.zigzag-lines-type .spin-center__circle:nth-child(2) {
  animation-delay: 0.2s;
  background-color: #e74c3c;
}
.arlet-loaddign.zigzag-lines-type .spin-center__circle:nth-child(3) {
  animation-delay: 0.4s;
  background-color: #2ecc71;
}
.arlet-loaddign.zigzag-lines-type .spin-center__circle:nth-child(4) {
  animation-delay: 0.6s;
  background-color: #9b59b6;
}
@keyframes zigzag-lines {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(20px) translateY(-20px);
  }
}
.arlet-loaddign.sliding-circles-type .spin-center__circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #9b59b6;
  animation: sliding-circles 1.5s ease-in-out infinite;
}
.arlet-loaddign.sliding-circles-type .spin-center__circle:nth-child(1) {
  animation-delay: 0s;
}
.arlet-loaddign.sliding-circles-type .spin-center__circle:nth-child(2) {
  animation-delay: 0.3s;
}
.arlet-loaddign.sliding-circles-type .spin-center__circle:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes sliding-circles {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(40px);
  }
}
.arlet-loaddign.rotating-bars-type .spin-center__circle {
  position: absolute;
  width: 60px;
  height: 4px;
  background-color: #3498db;
  animation: rotating-bars 1s linear infinite;
}
@keyframes rotating-bars {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.arlet-loaddign.expanding-squares-type .spin-center__circle {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #e74c3c;
  animation: expanding-squares 1.5s ease-in-out infinite;
}
@keyframes expanding-squares {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.arlet-loaddign.rotating-stars-type .spin-center__circle {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1c40f;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: rotating-stars 1.5s linear infinite;
}
@keyframes rotating-stars {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.arlet-loaddign.pulsing-rings-type .spin-center__circle {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid #2ecc71;
  border-radius: 50%;
  animation: pulsing-rings 1.5s ease-in-out infinite;
}
@keyframes pulsing-rings {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}