Spinner on Button CSS Generator

A worked example

Suppose you have a dark blue “Save” button with white text. In the generator, enter size 16, thickness 2, color #ffffff and speed 0.8. The tool produces:

.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); }
}

The ring track is a fixed light gray, which is visible on a dark button. If you want a subtler track, change #eee to a translucent value such as rgba(255, 255, 255, 0.3) in the pasted CSS. The arc color stays whatever you picked.

Place it inside the button

Put the spinner element before the label and make the button a flex row so they sit on one line with a gap:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Saving"></span>
  Saving
</button>

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

Add the spinner and the disabled state only while the request is running. Remove both when it finishes. Disabling the button is what stops double submissions; the spinner is the signal that explains why.

Size and thickness for buttons

Notes

• The generator makes one circular ring. It does not create a button, so your button styles stay your own.
• A ring thicker than a quarter of its diameter fills up and looks like a disc, so keep thin values at small sizes.
• Keep the label next to the spinner. A spinner with no text can be hard to interpret for some users.

Avoid layout jumps

If the spinner appears and the button suddenly grows wider, the layout shifts and the click target moves. Two easy fixes help. Give the button a minimum width that already fits the spinner and the longer label. Or reserve the spinner space from the start by showing an empty 16 px placeholder before the label. Because the generated ring has a fixed width and height in pixels, it is easy to reserve exactly the room it needs.