Генератор спиннера для кнопки в CSS

Пример шаг за шагом

Допустим, у вас темно-синяя кнопка «Сохранить» с белым текстом. В генераторе введите размер 16, толщину 2, цвет #ffffff и скорость 0,8. Инструмент создаст:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Трек кольца имеет фиксированный светло-серый цвет, который хорошо виден на темной кнопке. Если нужен более тонкий трек, замените #eee на полупрозрачное значение, например rgba(255, 255, 255, 0.3), в скопированном CSS. Цвет дуги останется тем, который вы выбрали.

Размещение внутри кнопки

Поместите элемент спиннера перед подписью и сделайте кнопку строкой flex, чтобы они стояли в одну линию с промежутком:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Сохранение"></span>
  Сохранение
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Добавляйте спиннер и состояние disabled только на время выполнения запроса. Удаляйте оба, когда он завершится. Отключение кнопки предотвращает повторную отправку, а спиннер объясняет причину.

Размер и толщина для кнопок

Примечания

• Генератор создает одно круглое кольцо. Он не создает кнопку, поэтому стили кнопки остаются вашими.
• Кольцо толще четверти диаметра заполняется и выглядит как диск, поэтому при малых размерах используйте тонкие значения.
• Оставляйте подпись рядом со спиннером. Спиннер без текста может быть непонятен части пользователей.

Избегайте скачков верстки

Если спиннер появляется и кнопка внезапно становится шире, верстка сдвигается, и область нажатия смещается. Помогут два простых способа. Задайте кнопке минимальную ширину, которой хватит и для спиннера, и для более длинной подписи. Или заранее зарезервируйте место под спиннер, показывая пустой плейсхолдер 16 px перед подписью. Поскольку сгенерированное кольцо имеет фиксированную ширину и высоту в пикселях, легко зарезервировать именно то место, которое ему нужно.