# Carga de tres puntos (B 083)

Categoría: Botones  
Etiquetas: loading, dots, css-animation, pill  
Página: https://designforai.dev/es/snippet/btn-083

## 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.

## HTML

```html
<button class="btn-083" disabled aria-label="Loading"><i></i><i></i><i></i></button>
```

## CSS

```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; }
}
```