# Anel de carregamento (B 082)

Categoria: Botões  
Tags: loading, spinner, css-animation, solid  
Página: https://designforai.dev/pt/snippet/btn-082

## Prompt

Um botão de carregamento azul #2563eb, desabilitado, com 85% de opacidade, texto branco de 14px semibold "Saving" e um anel girando de 16px à esquerda: uma borda circular de 2.5px em branco a 35% com um segmento superior branco sólido que dá uma volta a cada 700ms. Raio de 8px, padding de 12px por 22px, cursor progress. Hover e active não mudam nada.

## HTML

```html
<button class="btn-082" disabled><i></i>Saving</button>
```

## CSS

```css
.btn-082 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 14px/1 system-ui,sans-serif;
  color: #fff;
  background: #2563eb;
  border: 0;
  border-radius: 8px;
  padding: 12px 22px;
  cursor: progress;
  opacity: .85
}
.btn-082 i {
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-082-r .7s linear infinite
}
@keyframes btn-082-r {
  to {
    transform: rotate(360deg)
  }
}
.btn-082:hover {
  background: #2563eb
}
.btn-082:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px
}
.btn-082:active {
  transform: none
}
@media (prefers-reduced-motion: reduce) {
  .btn-082, .btn-082 * { animation: none; transition: none; }
}
```