Pulsar
Tally Count: Ticks and a slash forming a tally set

Tally Count

CSS

An array of vertical ticks draws in sequence, and a diagonal slash sweeps across them to bundle them into completed sets.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Determinate progress
Industries
Finance and fintech, Cross-industry
Style
Minimal line · light stroke
Set
reconcile
Tags
loopminimalui

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated
Tally Count: Ticks and a slash forming a tally set
CSS tier
Static vector
Tally Count, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="reconcile-tally-title" class="pulsar pulsar-reconcile-tally" data-pulsar="reconcile-tally" role="img" viewBox="0 0 120 40"><title id="reconcile-tally-title">Tally Count: Ticks and a slash forming a tally set</title><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><line id="reconcile-tally-t1" x1="45" x2="45" y1="10" y2="30"></line><line id="reconcile-tally-t2" x1="50" x2="50" y1="10" y2="30"></line><line id="reconcile-tally-t3" x1="55" x2="55" y1="10" y2="30"></line><line id="reconcile-tally-t4" x1="60" x2="60" y1="10" y2="30"></line><line id="reconcile-tally-slash" x1="42" x2="63" y1="28" y2="12"></line></g></svg>

animation.css

.pulsar-reconcile-tally [id^='reconcile-tally-t'],
.pulsar-reconcile-tally #reconcile-tally-slash {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.pulsar-reconcile-tally #reconcile-tally-t1 {
  animation-name: reconcile-tally-t1-main;
}
.pulsar-reconcile-tally #reconcile-tally-t2 {
  animation-name: reconcile-tally-t2-main;
}
.pulsar-reconcile-tally #reconcile-tally-t3 {
  animation-name: reconcile-tally-t3-main;
}
.pulsar-reconcile-tally #reconcile-tally-t4 {
  animation-name: reconcile-tally-t4-main;
}
.pulsar-reconcile-tally #reconcile-tally-slash {
  animation-name: reconcile-tally-slash-main;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

@keyframes reconcile-tally-t1-main {
  0% {
    stroke-dashoffset: 30;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  10%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes reconcile-tally-t2-main {
  0%,
  10% {
    stroke-dashoffset: 30;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  20%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes reconcile-tally-t3-main {
  0%,
  20% {
    stroke-dashoffset: 30;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  30%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes reconcile-tally-t4-main {
  0%,
  30% {
    stroke-dashoffset: 30;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  40%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes reconcile-tally-slash-main {
  0%,
  40% {
    stroke-dashoffset: 40;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  60%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-tally [id^='reconcile-tally-t'],
  .pulsar-reconcile-tally #reconcile-tally-slash {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}