Design for AI

Carga de tres puntos

Carga de tres puntos: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

loadingdotscss-animationpill

CSS
.btn-083 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 120px;
  height: 42px;
  background: #111827;
  border: 0;
  border-radius: 999px;
  cursor: progress
}
.btn-083 i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: btn-083-b .9s infinite ease-in-out
}
.btn-083 i:nth-child(2) {
  animation-delay: .15s
}
.btn-083 i:nth-child(3) {
  animation-delay: .3s
}
@keyframes btn-083-b {
  0%,80%,100% {
    transform: translateY(0);
    opacity: .4
  }
  40% {
    transform: translateY(-6px);
    opacity: 1
  }
}
.btn-083:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 3px
}
@media (prefers-reduced-motion: reduce) {
  .btn-083, .btn-083 * { animation: none; transition: none; }
}
HTML
<button class="btn-083" disabled aria-label="Loading"><i></i><i></i><i></i></button>
Prompt

Un botón píldora oscuro #111827, de 120px de ancho y 42px de alto, deshabilitado, que muestra tres puntos blancos de 7px que rebotan 6px hacia arriba uno tras otro (150ms de desfase, ciclo de 900ms) mientras su opacidad oscila entre el 40% y el 100%. Sin texto. Cursor progress.

Misma estantería