AI CSS Animations

Toggle with Saving Status

A settings row whose switch shows a loading state: the knob stops halfway with a spinner while the status reads Saving, then lands with a little overshoot, the track fills and the status turns On.

Also known as: toggle loading, toggle loading state, toggle switch saving state, async settings toggle css.

HTML

<label class="tgl-loading-status-toggle">
  <input type="checkbox" role="switch" aria-label="Auto deploy">
  <span class="tgl-loading-status-toggle-text" aria-hidden="true">
    <span class="tgl-loading-status-toggle-title">Auto deploy</span>
    <span class="tgl-loading-status-toggle-state">
      <span class="tgl-loading-status-toggle-off">Off, deploy by hand</span>
      <span class="tgl-loading-status-toggle-saving">Saving</span>
      <span class="tgl-loading-status-toggle-on">On, deploys from main</span>
    </span>
  </span>
  <span class="tgl-loading-status-toggle-track" aria-hidden="true"><span class="tgl-loading-status-toggle-knob"><span class="tgl-loading-status-toggle-spin"></span></span></span>
</label>

CSS

.tgl-loading-status-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
  line-height: 1.2;
  justify-content: space-between;
  gap: 1.6em;
  box-sizing: border-box;
  width: 15em;
  padding: 0.75em 0.8em 0.75em 1em;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 0.9em;
  background: color-mix(in srgb, currentColor 3%, transparent);
}
.tgl-loading-status-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-loading-status-toggle-text {
  display: grid;
  gap: 0.2em;
}
.tgl-loading-status-toggle-title {
  font-size: 0.85em;
  font-weight: 650;
}
.tgl-loading-status-toggle-state {
  display: grid;
  font-size: 0.68em;
  white-space: nowrap;
}
.tgl-loading-status-toggle-state > span {
  grid-area: 1 / 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tgl-loading-status-toggle-off {
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.tgl-loading-status-toggle-saving {
  color: var(--c);
  opacity: 0;
}
.tgl-loading-status-toggle-saving::after {
  content: "...";
  display: inline-block;
  overflow: hidden;
  width: 0;
  vertical-align: bottom;
}
.tgl-loading-status-toggle-on {
  color: color-mix(in srgb, currentColor 60%, transparent);
  opacity: 0;
}
.tgl-loading-status-toggle-track {
  position: relative;
  flex: none;
  width: 3.4em;
  height: 1.9em;
  border-radius: 99em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 0.3s ease;
}
.tgl-loading-status-toggle-track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tgl-loading-status-toggle-knob {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.22);
  transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.5, 1), left 0.4s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.tgl-loading-status-toggle-spin {
  box-sizing: border-box;
  width: 0.95em;
  height: 0.95em;
  border: 0.14em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  opacity: 0;
}
/* on: halfway and spinning, then landing */
.tgl-loading-status-toggle input:checked ~ .tgl-loading-status-toggle-track {
  background: color-mix(in srgb, var(--c) 22%, transparent);
}
.tgl-loading-status-toggle input:checked ~ .tgl-loading-status-toggle-track::before {
  opacity: 1;
  transition: opacity 0.3s ease 1.15s;
}
/* halfway at once, the rest of the way after the save */
.tgl-loading-status-toggle input:checked ~ .tgl-loading-status-toggle-track .tgl-loading-status-toggle-knob {
  left: 0.95em;
  transform: translateX(0.75em);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.34, 1.6, 0.5, 1) 1.1s;
}
.tgl-loading-status-toggle input:checked ~ .tgl-loading-status-toggle-track .tgl-loading-status-toggle-spin {
  animation: tgl-loading-status-toggle-spin 0.6s linear 0.2s 2, tgl-loading-status-toggle-spinner 1.5s both;
}
.tgl-loading-status-toggle input:checked + .tgl-loading-status-toggle-text .tgl-loading-status-toggle-off {
  opacity: 0;
  transform: translateY(-0.5em);
}
.tgl-loading-status-toggle input:checked + .tgl-loading-status-toggle-text .tgl-loading-status-toggle-saving {
  animation: tgl-loading-status-toggle-saving 1.5s both;
}
.tgl-loading-status-toggle input:checked + .tgl-loading-status-toggle-text .tgl-loading-status-toggle-saving::after {
  animation: tgl-loading-status-toggle-dots 0.9s steps(4, end) infinite;
}
.tgl-loading-status-toggle input:checked + .tgl-loading-status-toggle-text .tgl-loading-status-toggle-on {
  animation: tgl-loading-status-toggle-done 1.5s both;
}
.tgl-loading-status-toggle input:focus-visible ~ .tgl-loading-status-toggle-track {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes tgl-loading-status-toggle-spin {
  to { transform: rotate(360deg); }
}
@keyframes tgl-loading-status-toggle-spinner {
  0%, 12% { opacity: 0; }
  20%, 70% { opacity: 1; }
  78%, 100% { opacity: 0; }
}
@keyframes tgl-loading-status-toggle-saving {
  0% { opacity: 0; transform: translateY(0.5em); }
  12%, 70% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes tgl-loading-status-toggle-done {
  0%, 74% { opacity: 0; transform: translateY(0.5em); }
  90%, 100% { opacity: 1; transform: none; }
}
@keyframes tgl-loading-status-toggle-dots {
  to { width: 1.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .tgl-loading-status-toggle *,
  .tgl-loading-status-toggle *::before,
  .tgl-loading-status-toggle *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tgl-loading-status-toggle, .tgl-loading-status-toggle *, .tgl-loading-status-toggle::before, .tgl-loading-status-toggle::after, .tgl-loading-status-toggle *::before, .tgl-loading-status-toggle *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --tgl-color on the element or a parent. Currently previewing #3b82f6.
  • Size: set --tgl-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 24px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar toggle switches

Toggle Switch with Loading State
On Off Toggle Switch
Two Label Toggle Switch
3D Rocker Switch