Poll
CSSA client queries a remote server at regular intervals, receiving empty responses before a fourth probe successfully returns with a data payload.
- Tier
- CSS
- Dependencies
- None
- Duration
- 4 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting, Sync and integration
- Industries
- SaaS and software, Cross-industry
- Style
- Minimal line · light stroke
- Set
- signal
- Tags
- loopminimaluicirclepulse
Companion assets
The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.
Code
animation.svg
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="signal-poll-title" class="pulsar pulsar-signal-poll" data-pulsar="signal-poll" role="img" viewBox="0 0 120 40"><title id="signal-poll-title">Periodic polling probes resolving with server payload</title><line id="signal-poll-track" x1="24" x2="96" y1="20" y2="20" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><circle id="signal-poll-probe-empty" cx="24" cy="20" r="2" fill="currentColor" opacity="0"></circle><line id="signal-poll-probe-final" x1="24" x2="96" y1="20" y2="20" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="12 72" stroke-dashoffset="12" stroke-linecap="round" stroke-width="2"></line><line id="signal-poll-return" x1="96" x2="24" y1="20" y2="20" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="16 72" stroke-dashoffset="16" stroke-linecap="round" stroke-width="2.5"></line><circle id="signal-poll-client" cx="24" cy="20" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><circle id="signal-poll-server" cx="96" cy="20" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><circle id="signal-poll-server-ripple" cx="96" cy="20" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" opacity="0"></circle><circle id="signal-poll-client-ripple" cx="24" cy="20" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" opacity="0"></circle></svg>
animation.css
.pulsar-signal-poll #signal-poll-probe-empty {
animation: signal-poll-empty-anim 4000ms ease-out infinite;
}
.pulsar-signal-poll #signal-poll-probe-final {
animation: signal-poll-final-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-signal-poll #signal-poll-server-ripple {
animation: signal-poll-srv-ripple 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 96px 20px;
}
.pulsar-signal-poll #signal-poll-return {
animation: signal-poll-ret-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-signal-poll #signal-poll-client-ripple {
animation: signal-poll-cli-ripple 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 24px 20px;
}
@keyframes signal-poll-empty-anim {
0% {
transform: translateX(0);
opacity: 0.8;
}
8% {
transform: translateX(28px);
opacity: 0;
}
22% {
transform: translateX(0);
opacity: 0.8;
}
30% {
transform: translateX(28px);
opacity: 0;
}
44% {
transform: translateX(0);
opacity: 0.8;
}
52% {
transform: translateX(28px);
opacity: 0;
}
53%,
100% {
opacity: 0;
transform: translateX(0);
}
}
@keyframes signal-poll-final-anim {
0%,
62% {
stroke-dashoffset: 12;
opacity: 0;
}
65% {
opacity: 1;
}
74% {
stroke-dashoffset: -60;
opacity: 1;
}
76%,
100% {
stroke-dashoffset: -60;
opacity: 0;
}
}
@keyframes signal-poll-srv-ripple {
0%,
72% {
opacity: 0;
transform: scale(0.6);
}
75% {
opacity: 0.9;
}
82% {
opacity: 0;
transform: scale(2.4);
}
100% {
opacity: 0;
transform: scale(2.4);
}
}
@keyframes signal-poll-ret-anim {
0%,
75% {
stroke-dashoffset: 16;
opacity: 0;
}
77% {
opacity: 1;
}
90% {
stroke-dashoffset: -56;
opacity: 1;
}
92%,
100% {
stroke-dashoffset: -56;
opacity: 0;
}
}
@keyframes signal-poll-cli-ripple {
0%,
89% {
opacity: 0;
transform: scale(0.6);
}
91% {
opacity: 0.9;
}
98% {
opacity: 0;
transform: scale(2.6);
}
100% {
opacity: 0;
transform: scale(2.6);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-signal-poll * {
animation: none !important;
transform: none;
}
.pulsar-signal-poll #signal-poll-return {
stroke-dashoffset: -20;
opacity: 0.8;
}
}