Rotating Badge Text: CSS Text Animation

Rotating Badge Text

An Open 24/7 stamp: a ring of letters turns slowly around a bold center, inside a thin outline and a dashed inner ring. Each letter is a span rotated by its index, so no SVG is needed.

Also known as: open 24/7 badge, rotating stamp text, spinning badge css.

Color Font size 40px Dark background

HTML

<div class="txt-rotating-badge-text" aria-label="Open 24 hours, 7 days a week">
  <span class="txt-rotating-badge-text-ring" style="--n: 32" aria-hidden="true"><span style="--i: 0">O</span><span style="--i: 1">P</span><span style="--i: 2">E</span><span style="--i: 3">N</span><span style="--i: 4">&nbsp;</span><span style="--i: 5">2</span><span style="--i: 6">4</span><span style="--i: 7">&nbsp;</span><span style="--i: 8">H</span><span style="--i: 9">O</span><span style="--i: 10">U</span><span style="--i: 11">R</span><span style="--i: 12">S</span><span style="--i: 13">&nbsp;</span><span style="--i: 14">•</span><span style="--i: 15">&nbsp;</span><span style="--i: 16">7</span><span style="--i: 17">&nbsp;</span><span style="--i: 18">D</span><span style="--i: 19">A</span><span style="--i: 20">Y</span><span style="--i: 21">S</span><span style="--i: 22">&nbsp;</span><span style="--i: 23">A</span><span style="--i: 24">&nbsp;</span><span style="--i: 25">W</span><span style="--i: 26">E</span><span style="--i: 27">E</span><span style="--i: 28">K</span><span style="--i: 29">&nbsp;</span><span style="--i: 30">•</span><span style="--i: 31">&nbsp;</span></span>
  <b class="txt-rotating-badge-text-core" aria-hidden="true">24/7</b>
</div>

CSS

.txt-rotating-badge-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: grid;
  place-items: center;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  color: var(--c);
  box-shadow: inset 0 0 0 0.07em var(--c);}
.txt-rotating-badge-text::before {
  content: "";
  position: absolute;
  inset: 0.95em;
  border-radius: 50%;
  border: 0.05em dashed color-mix(in srgb, var(--c) 60%, transparent);
}
.txt-rotating-badge-text-ring {
  position: absolute;
  inset: 0;
  font-size: 0.44em;
  font-weight: 800;
  animation: txt-rotating-badge-text-spin 20s linear infinite;
}
/* each letter sits at the top of a full-width spoke that pivots on the center */
.txt-rotating-badge-text-ring span {
  position: absolute;
  inset: 0.55em 0 50%;
  text-align: center;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--i) * 360deg / var(--n)));
}
.txt-rotating-badge-text-core {
  font-size: 1.05em;
  font-weight: 900;
  letter-spacing: -0.03em;
}
@keyframes txt-rotating-badge-text-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .txt-rotating-badge-text, .txt-rotating-badge-text *, .txt-rotating-badge-text::before, .txt-rotating-badge-text::after, .txt-rotating-badge-text *::before, .txt-rotating-badge-text *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind CSS version

The same effect using Tailwind utility classes. No custom CSS or config needed.

<div class="relative grid h-28 w-28 place-items-center rounded-full text-blue-500 ring-2 ring-inset ring-blue-500" aria-label="Open 24 hours, 7 days a week">
  <span class="absolute inset-5 rounded-full border border-dashed border-blue-500/60"></span>
  <span class="absolute inset-0 animate-[spin_20s_linear_infinite] text-[10px] font-extrabold [&>span]:absolute [&>span]:inset-x-0 [&>span]:bottom-1/2 [&>span]:top-[0.55em] [&>span]:origin-bottom [&>span]:text-center [&>span]:[rotate:calc(var(--i)*11.25deg)]" aria-hidden="true"><span style="--i: 0">O</span><span style="--i: 1">P</span><span style="--i: 2">E</span><span style="--i: 3">N</span><span style="--i: 4">&nbsp;</span><span style="--i: 5">2</span><span style="--i: 6">4</span><span style="--i: 7">&nbsp;</span><span style="--i: 8">H</span><span style="--i: 9">O</span><span style="--i: 10">U</span><span style="--i: 11">R</span><span style="--i: 12">S</span><span style="--i: 13">&nbsp;</span><span style="--i: 14">•</span><span style="--i: 15">&nbsp;</span><span style="--i: 16">7</span><span style="--i: 17">&nbsp;</span><span style="--i: 18">D</span><span style="--i: 19">A</span><span style="--i: 20">Y</span><span style="--i: 21">S</span><span style="--i: 22">&nbsp;</span><span style="--i: 23">A</span><span style="--i: 24">&nbsp;</span><span style="--i: 25">W</span><span style="--i: 26">E</span><span style="--i: 27">E</span><span style="--i: 28">K</span><span style="--i: 29">&nbsp;</span><span style="--i: 30">•</span><span style="--i: 31">&nbsp;</span></span>
  <b class="text-2xl font-black tracking-tight">24/7</b>
</div>

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
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.

Rotating Badge Text

HTML

CSS

Tailwind CSS version

Customizing this snippet

Similar text animations