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.image-type .spin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.image-type .image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 140px;
  max-height: 140px;
  perspective: 800px;
}
.arlet-loaddign.image-type .image-wrapper.image-wrapper--custom-size {
  max-width: none;
  max-height: none;
}
.arlet-loaddign.image-type .image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: none;
}
.arlet-loaddign.image-type.image-rotate .image-wrapper img {
  animation: image-rotate 1.5s linear infinite;
}
.arlet-loaddign.image-type.image-rotate-vertical .image-wrapper img {
  animation: image-rotate-vertical 2s linear infinite;
  transform-origin: center;
}
.arlet-loaddign.image-type.image-rotate-horizontal .image-wrapper img {
  animation: image-rotate-horizontal 2s linear infinite;
  transform-origin: center;
}
@keyframes image-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes image-rotate-vertical {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes image-rotate-horizontal {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
.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;
  }
}
.arlet-loaddign.ia-type .spin {
  position: relative;
  width: 160px;
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.ia-type .spin-center,
.arlet-loaddign.ia-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.ia-type .ia-face {
  position: relative;
  width: 140px;
  height: 120px;
  padding: 26px 28px 32px;
  border-radius: 60% 60% 45% 45%/65% 65% 45% 45%;
  background: radial-gradient(circle at 30% 30%, rgba(0, 255, 156, 0.18), transparent 55%), #1b202c;
  box-shadow: 0 0 35px rgba(0, 255, 156, 0.25), inset 0 0 25px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  animation: ia-face-breathe 3s ease-in-out infinite;
}
.arlet-loaddign.ia-type .ia-face::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 2px solid rgba(0, 255, 156, 0.25);
  opacity: 0.9;
  filter: blur(1px);
  animation: ia-face-glow 3s ease-in-out infinite;
}
.arlet-loaddign.ia-type .ia-face__antenna {
  position: absolute;
  top: -38px;
  width: 12px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 255, 156, 0.35), #111621 70%);
  box-shadow: 0 0 18px rgba(0, 255, 156, 0.35);
  animation: ia-antenna 2.6s ease-in-out infinite;
}
.arlet-loaddign.ia-type .ia-face__antenna::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #00ff9c;
  box-shadow: 0 0 16px rgba(0, 255, 156, 0.9), 0 0 34px rgba(0, 255, 156, 0.4);
  animation: ia-antenna-spark 1.6s ease-in-out infinite;
}
.arlet-loaddign.ia-type .ia-face__eyes {
  position: relative;
  width: 100%;
  max-width: 90px;
  display: flex;
  justify-content: space-between;
}
.arlet-loaddign.ia-type .ia-face__eye {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.75), rgba(0, 255, 156, 0.92) 50%, rgba(0, 32, 28, 0.95) 100%);
  box-shadow: 0 0 16px rgba(0, 255, 156, 0.7);
  animation: ia-eye-blink 3s ease-in-out infinite;
  transform-origin: center;
}
.arlet-loaddign.ia-type .ia-face__eye::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 22%;
  width: 45%;
  height: 38%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  filter: blur(1px);
}
.arlet-loaddign.ia-type .ia-face__eye:nth-child(2) {
  animation-delay: 0.18s;
}
.arlet-loaddign.ia-type .ia-face__mouth {
  position: relative;
  width: 84%;
  max-width: 100px;
  height: 20px;
  border-radius: 12px;
  background: #101621;
  border: 1px solid rgba(0, 255, 156, 0.45);
  box-shadow: inset 0 0 14px rgba(0, 255, 156, 0.25), 0 0 18px rgba(0, 255, 156, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  overflow: hidden;
}
.arlet-loaddign.ia-type .ia-face__mouth::before,
.arlet-loaddign.ia-type .ia-face__mouth::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 156, 0.15), transparent);
  opacity: 0.4;
  transform: translateX(-120%);
  animation: ia-mouth-sweep 2.8s ease-in-out infinite;
}
.arlet-loaddign.ia-type .ia-face__mouth::after {
  animation-delay: 1.4s;
}
.arlet-loaddign.ia-type .ia-face__mouth-bar {
  display: block;
  width: 8px;
  height: 60%;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(0, 255, 156, 0.85), rgba(0, 255, 156, 0.35));
  animation: ia-mouth-bars 1.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.arlet-loaddign.ia-type .ia-face__mouth-bar:nth-child(2) {
  height: 85%;
}
.arlet-loaddign.ia-type .ia-face__mouth-bar:nth-child(3) {
  height: 50%;
}
@keyframes ia-face-breathe {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 35px rgba(0, 255, 156, 0.25), inset 0 0 25px rgba(0, 0, 0, 0.8);
  }
  50% {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 45px rgba(0, 255, 156, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.75);
  }
}
@keyframes ia-face-glow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
}
@keyframes ia-eye-blink {
  0%, 76%, 82%, 100% {
    transform: scaleY(1);
  }
  78%, 80% {
    transform: scaleY(0.15);
  }
  90% {
    transform: scaleY(0.8);
  }
}
@keyframes ia-mouth-bars {
  0%, 100% {
    transform: scaleY(0.6);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1.25);
    opacity: 1;
  }
}
@keyframes ia-mouth-sweep {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@keyframes ia-antenna {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes ia-antenna-spark {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) scale(1.2);
    opacity: 1;
  }
}
.arlet-loaddign.robot-type .spin {
  position: relative;
  width: 180px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.robot-type .spin-center,
.arlet-loaddign.robot-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.robot-type .robot-loader {
  position: relative;
  width: 150px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform-origin: center;
  animation: robot-bounce 3.2s ease-in-out infinite;
}
.arlet-loaddign.robot-type .robot-loader__antenna {
  position: absolute;
  top: -36px;
  width: 10px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0, 255, 156, 0.45), rgba(13, 20, 32, 0.9));
  box-shadow: 0 0 16px rgba(0, 255, 156, 0.55);
  animation: robot-antenna 2.4s ease-in-out infinite;
}
.arlet-loaddign.robot-type .robot-loader__antenna::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4fffd6;
  box-shadow: 0 0 20px rgba(79, 255, 214, 0.9);
  animation: robot-antenna-glow 1.8s ease-in-out infinite;
}
.arlet-loaddign.robot-type .robot-loader__head {
  position: relative;
  width: 150px;
  height: 120px;
  border-radius: 45% 45% 40% 40%;
  background: radial-gradient(circle at 25% 25%, rgba(79, 255, 214, 0.25), transparent 60%), #1a202c;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8), 0 0 26px rgba(79, 255, 214, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 22px 30px;
}
.arlet-loaddign.robot-type .robot-loader__head::before,
.arlet-loaddign.robot-type .robot-loader__head::after {
  content: "";
  position: absolute;
  top: 45%;
  width: 24px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15, 25, 38, 0.95), rgba(35, 48, 66, 0.85));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65);
}
.arlet-loaddign.robot-type .robot-loader__head::before {
  left: -14px;
}
.arlet-loaddign.robot-type .robot-loader__head::after {
  right: -14px;
}
.arlet-loaddign.robot-type .robot-loader__visor {
  position: relative;
  width: 100%;
  height: 46px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(6, 12, 21, 0.95), rgba(24, 38, 54, 0.9));
  border: 2px solid rgba(79, 255, 214, 0.35);
  box-shadow: inset 0 0 18px rgba(79, 255, 214, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 18px;
  overflow: hidden;
}
.arlet-loaddign.robot-type .robot-loader__eye {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9), rgba(79, 255, 214, 0.85) 55%, rgba(5, 38, 32, 0.98));
  box-shadow: 0 0 15px rgba(79, 255, 214, 0.7);
  animation: robot-eye-blink 3s ease-in-out infinite;
  animation-delay: calc(var(--eye-index, 0) * 0.18s);
}
.arlet-loaddign.robot-type .robot-loader__eye::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 24%;
  width: 45%;
  height: 35%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.arlet-loaddign.robot-type .robot-loader__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(79, 255, 214, 0.4), transparent);
  transform: translateX(-120%);
  animation: robot-scan 2.8s ease-in-out infinite;
}
.arlet-loaddign.robot-type .robot-loader__mouth {
  width: 90px;
  height: 26px;
  border-radius: 16px;
  background: #0f1623;
  border: 2px solid rgba(79, 255, 214, 0.35);
  box-shadow: inset 0 0 16px rgba(79, 255, 214, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.arlet-loaddign.robot-type .robot-loader__mouth-bar {
  width: 8px;
  height: 70%;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(79, 255, 214, 0.85), rgba(79, 255, 214, 0.35));
  animation: robot-mouth 1.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.arlet-loaddign.robot-type .robot-loader__body {
  position: relative;
  width: 138px;
  height: 95px;
  border-radius: 42px;
  background: linear-gradient(180deg, #151b25, #1f2634);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.85), 0 0 30px rgba(79, 255, 214, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px;
}
.arlet-loaddign.robot-type .robot-loader__body::before,
.arlet-loaddign.robot-type .robot-loader__body::after {
  content: "";
  position: absolute;
  top: 32px;
  width: 18px;
  height: 70px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 27, 37, 0.95), rgba(35, 48, 66, 0.85));
}
.arlet-loaddign.robot-type .robot-loader__body::before {
  left: -20px;
}
.arlet-loaddign.robot-type .robot-loader__body::after {
  right: -20px;
}
.arlet-loaddign.robot-type .robot-loader__core {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 255, 214, 0.85), rgba(79, 255, 214, 0.1));
  box-shadow: 0 0 35px rgba(79, 255, 214, 0.45);
  animation: robot-core 2.8s ease-in-out infinite;
}
.arlet-loaddign.robot-type .robot-loader__panel {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.arlet-loaddign.robot-type .robot-loader__panel-led {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(79, 255, 214, 0.25);
  box-shadow: 0 0 12px rgba(79, 255, 214, 0.25);
  animation: robot-panel 1.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes robot-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes robot-antenna {
  0%, 100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes robot-antenna-glow {
  0%, 100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}
@keyframes robot-eye-blink {
  0%, 78%, 82%, 100% {
    transform: scaleY(1);
  }
  80% {
    transform: scaleY(0.2);
  }
}
@keyframes robot-scan {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@keyframes robot-mouth {
  0%, 100% {
    transform: scaleY(0.6);
    opacity: 0.7;
  }
  50% {
    transform: scaleY(1.2);
    opacity: 1;
  }
}
@keyframes robot-core {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}
@keyframes robot-panel {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
.arlet-loaddign.bike-type .spin {
  position: relative;
  width: 240px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.bike-type .spin-center,
.arlet-loaddign.bike-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.bike-type .bike-loader {
  position: relative;
  width: 210px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  animation: bike-bob 3.4s ease-in-out infinite;
}
.arlet-loaddign.bike-type .bike-loader__wheel {
  position: absolute;
  bottom: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 6px solid rgba(0, 0, 0, 0.85);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.65), 0 0 25px rgba(79, 255, 214, 0.25);
  background: radial-gradient(circle, rgba(17, 30, 40, 0.9) 55%, rgba(79, 255, 214, 0.3));
  animation: bike-wheel 1.8s linear infinite;
  animation-delay: calc(var(--index, 0) * 0.08s);
}
.arlet-loaddign.bike-type .bike-loader__wheel--back {
  left: 12px;
}
.arlet-loaddign.bike-type .bike-loader__wheel--front {
  right: 12px;
}
.arlet-loaddign.bike-type .bike-loader__spokes {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(79, 255, 214, 0.35);
  box-shadow: 0 0 12px rgba(79, 255, 214, 0.35);
}
.arlet-loaddign.bike-type .bike-loader__spokes::before,
.arlet-loaddign.bike-type .bike-loader__spokes::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(79, 255, 214, 0.4);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(79, 255, 214, 0.3);
}
.arlet-loaddign.bike-type .bike-loader__spokes::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.arlet-loaddign.bike-type .bike-loader__frame {
  position: relative;
  width: 200px;
  height: 90px;
}
.arlet-loaddign.bike-type .bike-loader__bar {
  position: absolute;
  height: 8px;
  background: linear-gradient(90deg, rgba(79, 255, 214, 0.4), rgba(79, 255, 214, 0.1));
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(79, 255, 214, 0.35);
}
.arlet-loaddign.bike-type .bike-loader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(79, 255, 214, 0.6), transparent);
  opacity: 0;
  animation: bike-flow 2.6s ease-in-out infinite;
}
.arlet-loaddign.bike-type .bike-loader__bar--top {
  top: 12px;
  left: 52px;
  right: 26px;
  transform: rotate(-10deg);
}
.arlet-loaddign.bike-type .bike-loader__bar--seat {
  top: 20px;
  left: 52px;
  width: 8px;
  height: 52px;
}
.arlet-loaddign.bike-type .bike-loader__bar--down {
  bottom: 6px;
  left: 58px;
  right: 100px;
  transform: rotate(36deg);
}
.arlet-loaddign.bike-type .bike-loader__bar--chain {
  bottom: 0;
  left: 80px;
  right: 60px;
  height: 6px;
}
.arlet-loaddign.bike-type .bike-loader__pedal {
  position: absolute;
  bottom: 34px;
  left: 96px;
  width: 34px;
  height: 34px;
  border: 4px solid rgba(79, 255, 214, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(79, 255, 214, 0.4);
  animation: bike-wheel 1.8s linear infinite;
}
.arlet-loaddign.bike-type .bike-loader__pedal-arm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 4px;
  background: rgba(79, 255, 214, 0.6);
  transform-origin: left center;
  transform: translateX(-50%);
  border-radius: 4px;
}
.arlet-loaddign.bike-type .bike-loader__pedal-arm--counter {
  transform: translateX(-50%) rotate(180deg);
}
.arlet-loaddign.bike-type .bike-loader__seat {
  position: absolute;
  top: 30px;
  left: 66px;
  width: 40px;
  height: 12px;
  border-radius: 12px 12px 6px 6px;
  background: rgba(79, 255, 214, 0.65);
  box-shadow: 0 0 16px rgba(79, 255, 214, 0.45);
}
.arlet-loaddign.bike-type .bike-loader__handle {
  position: absolute;
  top: 20px;
  right: 46px;
  width: 44px;
  height: 10px;
  border-radius: 8px;
  background: rgba(79, 255, 214, 0.55);
  transform: rotate(18deg);
  box-shadow: 0 0 16px rgba(79, 255, 214, 0.35);
}
@keyframes bike-wheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bike-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes bike-flow {
  0%, 100% {
    opacity: 0;
    transform: translateX(-40%);
  }
  50% {
    opacity: 1;
    transform: translateX(40%);
  }
}
.arlet-loaddign.motor-bike-type .spin {
  position: relative;
  width: 240px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.motor-bike-type .spin-center,
.arlet-loaddign.motor-bike-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader {
  position: relative;
  width: 220px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: motor-bike-tilt 3s ease-in-out infinite;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__wheel {
  position: absolute;
  bottom: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 6px solid rgba(13, 17, 25, 0.95);
  background: radial-gradient(circle, rgba(26, 36, 46, 0.95) 50%, rgba(79, 211, 255, 0.25));
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7), 0 0 26px rgba(79, 211, 255, 0.25);
  animation: motor-bike-wheel 1.5s linear infinite;
  animation-delay: calc(var(--index, 0) * 0.12s);
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__wheel--back {
  left: 10px;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__wheel--front {
  right: 10px;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__rim {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 3px solid rgba(79, 211, 255, 0.45);
  box-shadow: 0 0 12px rgba(79, 211, 255, 0.35);
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__body {
  position: relative;
  width: 150px;
  height: 80px;
  border-radius: 60px 60px 40px 40px;
  background: linear-gradient(180deg, #111823, #1f2c3b);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.85), 0 0 28px rgba(79, 211, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 22px;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__body::before,
.arlet-loaddign.motor-bike-type .motor-bike-loader__body::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 20px;
  border-radius: 12px;
  background: rgba(79, 211, 255, 0.35);
  filter: blur(18px);
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__body::before {
  top: -10px;
  left: 18px;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__body::after {
  bottom: -10px;
  right: 18px;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__tank {
  width: 60px;
  height: 36px;
  border-radius: 40px 40px 18px 18px;
  background: linear-gradient(180deg, rgba(79, 211, 255, 0.6), rgba(20, 32, 48, 0.95));
  box-shadow: 0 0 22px rgba(79, 211, 255, 0.35);
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__seat {
  width: 58px;
  height: 16px;
  border-radius: 12px;
  background: rgba(79, 211, 255, 0.45);
  position: relative;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__seat::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  width: 28px;
  height: 6px;
  border-radius: 6px;
  background: rgba(79, 211, 255, 0.55);
  transform: translateY(-50%);
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__light {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 180, 0.9), rgba(255, 175, 79, 0.35));
  box-shadow: 0 0 24px rgba(255, 186, 79, 0.65);
  animation: motor-bike-light 2s ease-in-out infinite;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__smoke {
  position: absolute;
  left: -18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
}
.arlet-loaddign.motor-bike-type .motor-bike-loader__smoke-puff {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(180, 196, 216, 0.25);
  animation: motor-bike-smoke 2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes motor-bike-wheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes motor-bike-tilt {
  0%, 100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(2deg) translateY(-4px);
  }
}
@keyframes motor-bike-light {
  0%, 100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}
@keyframes motor-bike-smoke {
  0% {
    transform: translateX(0) scale(0.6);
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(-30px) scale(1.2);
    opacity: 0;
  }
}
.arlet-loaddign.weaves-type .spin {
  position: relative;
  width: 220px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.weaves-type .spin-center,
.arlet-loaddign.weaves-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.weaves-type .weaves-loader {
  position: relative;
  width: 180px;
  height: 100px;
  display: flex;
  justify-content: space-between;
}
.arlet-loaddign.weaves-type .weaves-loader__strand {
  position: relative;
  width: 14px;
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(180deg, rgba(79, 255, 214, 0.15), rgba(79, 255, 214, 0.65), rgba(79, 255, 214, 0.1));
  overflow: hidden;
  animation: weaves-sway 2.8s ease-in-out infinite;
  animation-delay: calc(var(--index, 0) * 0.18s);
}
.arlet-loaddign.weaves-type .weaves-loader__strand::before,
.arlet-loaddign.weaves-type .weaves-loader__strand::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(79, 255, 214, 0.4), transparent 70%);
}
.arlet-loaddign.weaves-type .weaves-loader__strand::before {
  top: -60%;
  left: -10%;
  animation: weaves-wave 2.4s ease-in-out infinite;
}
.arlet-loaddign.weaves-type .weaves-loader__strand::after {
  bottom: -60%;
  right: -10%;
  animation: weaves-wave 2.4s ease-in-out infinite reverse;
}
@keyframes weaves-sway {
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-8px) rotate(4deg);
  }
}
@keyframes weaves-wave {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(40%);
    opacity: 0.9;
  }
}
.arlet-loaddign.glass-ring-type .spin {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.glass-ring-type .spin-center,
.arlet-loaddign.glass-ring-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.glass-ring-type .glass-ring-loader {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.15));
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.08), 0 12px 40px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.arlet-loaddign.glass-ring-type .glass-ring-loader__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 18px rgba(126, 217, 255, 0.15);
}
.arlet-loaddign.glass-ring-type .glass-ring-loader__runner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 217, 255, 0.95), rgba(126, 217, 255, 0.3));
  box-shadow: 0 0 16px rgba(126, 217, 255, 0.65);
  transform: translate(-50%, -50%) translateX(46px);
  animation: glass-ring-rotate 1.6s linear infinite;
}
@keyframes glass-ring-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(46px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(46px);
  }
}
.arlet-loaddign.gradient-bar-type .spin {
  position: relative;
  width: 220px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.gradient-bar-type .spin-center,
.arlet-loaddign.gradient-bar-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.gradient-bar-type .gradient-bar-loader {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.arlet-loaddign.gradient-bar-type .gradient-bar-loader__track {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.15));
}
.arlet-loaddign.gradient-bar-type .gradient-bar-loader__indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(103, 214, 255, 0.05), rgba(103, 214, 255, 0.6), rgba(103, 214, 255, 0.1));
  animation: gradient-bar-progress 1.8s ease-in-out infinite;
}
.arlet-loaddign.gradient-bar-type .gradient-bar-loader__indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
  opacity: 0.35;
}
.arlet-loaddign.gradient-bar-type .gradient-bar-loader__glow {
  position: absolute;
  inset: -18px 0;
  background: radial-gradient(circle, rgba(103, 214, 255, 0.25), transparent 70%);
  filter: blur(6px);
  animation: gradient-bar-glow 1.8s ease-in-out infinite;
}
@keyframes gradient-bar-progress {
  0% {
    transform: translateX(-110%);
    width: 28%;
  }
  50% {
    transform: translateX(10%);
    width: 70%;
  }
  100% {
    transform: translateX(130%);
    width: 28%;
  }
}
@keyframes gradient-bar-glow {
  0% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.45;
  }
  100% {
    opacity: 0.15;
  }
}
.arlet-loaddign.dual-pulse-type .spin {
  position: relative;
  width: 140px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.dual-pulse-type .spin-center,
.arlet-loaddign.dual-pulse-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.dual-pulse-type .dual-pulse-loader {
  position: relative;
  display: flex;
  gap: 26px;
}
.arlet-loaddign.dual-pulse-type .dual-pulse-loader__circle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(103, 214, 255, 0.65));
  box-shadow: 0 0 18px rgba(103, 214, 255, 0.55);
  animation: dual-pulse-breathe 1.8s ease-in-out infinite;
  animation-delay: calc(var(--index, 0) * 0.3s);
}
.arlet-loaddign.dual-pulse-type .dual-pulse-loader__circle::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(103, 214, 255, 0.25);
  opacity: 0;
  animation: dual-pulse-wave 1.8s ease-in-out infinite;
  animation-delay: calc(var(--index, 0) * 0.3s);
}
@keyframes dual-pulse-breathe {
  0% {
    transform: scale(0.85);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(0.85);
    opacity: 0.75;
  }
}
@keyframes dual-pulse-wave {
  0% {
    transform: scale(0.6);
    opacity: 0.45;
  }
  70% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
.arlet-loaddign.line-wave-type .spin {
  position: relative;
  width: 180px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arlet-loaddign.line-wave-type .spin-center,
.arlet-loaddign.line-wave-type .spin-center__circle {
  display: none;
}
.arlet-loaddign.line-wave-type .line-wave-loader {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 42px;
}
.arlet-loaddign.line-wave-type .line-wave-loader__segment {
  width: 8px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(103, 214, 255, 0.6), rgba(103, 214, 255, 0.15));
  box-shadow: 0 0 12px rgba(103, 214, 255, 0.35);
  animation: line-wave-dance 1.4s ease-in-out infinite;
  animation-delay: calc(var(--index, 0) * 0.1s);
}
@keyframes line-wave-dance {
  0% {
    transform: scaleY(0.5);
    opacity: 0.4;
  }
  40% {
    transform: scaleY(1.35);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.5);
    opacity: 0.4;
  }
}

/*# sourceMappingURL=ArletLoadding.css.map */