Submit Button Loading Animation
The full loading state of a submit button: it presses, the label slides out, a spinner scales in at the same width, then the label returns. The button never changes size.
Also known as: button loading state, button text to spinner, form submit loader.
HTML
<button class="ldr-submit-button-loading" type="button" aria-busy="true"> <span class="ldr-submit-button-loading-label">Submit</span> <span class="ldr-submit-button-loading-spinner" aria-hidden="true"></span> </button>
CSS
.ldr-submit-button-loading {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
display: inline-grid;
place-items: center;
padding: calc(var(--s) / 4) calc(var(--s) / 1.5);
border: 0;
border-radius: calc(var(--s) / 6);
background: var(--c);
color: #fff;
font: 600 calc(var(--s) / 2.8) / 1.2 system-ui, sans-serif;
overflow: hidden;
cursor: progress;
animation: ldr-submit-button-loading-press 2.8s ease-out infinite;
}
.ldr-submit-button-loading > * { grid-area: 1 / 1; }
.ldr-submit-button-loading-label {
animation: ldr-submit-button-loading-label 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-submit-button-loading-spinner {
width: 1.1em;
height: 1.1em;
box-sizing: border-box;
border: 0.15em solid rgb(255 255 255 / 0.35);
border-top-color: #fff;
border-radius: 50%;
animation:
ldr-submit-button-loading-spin 0.7s linear infinite,
ldr-submit-button-loading-swap 2.8s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}
@keyframes ldr-submit-button-loading-press {
0%, 14%, 28%, 100% { scale: 1; }
20% { scale: 0.95; }
}
@keyframes ldr-submit-button-loading-label {
0%, 20% { opacity: 1; transform: translateY(0); }
30% { opacity: 0; transform: translateY(-80%); }
31%, 76% { opacity: 0; transform: translateY(80%); }
86%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes ldr-submit-button-loading-swap {
0%, 24% { opacity: 0; scale: 0.4; }
34%, 72% { opacity: 1; scale: 1; }
80%, 100% { opacity: 0; scale: 0.4; }
}
@keyframes ldr-submit-button-loading-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-submit-button-loading, .ldr-submit-button-loading *, .ldr-submit-button-loading::before, .ldr-submit-button-loading::after, .ldr-submit-button-loading *::before, .ldr-submit-button-loading *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.