Sync
CSSTwo out-of-phase frequency trackers oscillate and drift apart before converging to an exact alignment, locking into synchronization with a verified state pulse.
- Tier
- CSS
- Dependencies
- None
- Duration
- 4 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting, Sync and integration
- Industries
- SaaS and software, Finance and fintech
- Style
- Minimal line · light stroke
- Set
- signal
- Tags
- loopminimaluigeometricpulse
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-sync-title" class="pulsar pulsar-signal-sync" data-pulsar="signal-sync" role="img" viewBox="0 0 120 40"><title id="signal-sync-title">Two frequency trackers converging and locking into phase sync</title><line id="signal-sync-axis" x1="16" x2="104" y1="20" y2="20" stroke="currentColor" stroke-dasharray="2 3" stroke-opacity=".15" stroke-width="1"></line><line id="signal-sync-target-mark" x1="60" x2="60" y1="6" y2="34" stroke="currentColor" stroke-dasharray="2 3" stroke-opacity=".15" stroke-width="1"></line><g id="signal-sync-tracker-a"><circle cx="60" cy="13" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><line x1="60" x2="60" y1="13" y2="18" stroke="currentColor" stroke-width="1.5"></line></g><g id="signal-sync-tracker-b"><circle cx="60" cy="27" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><line x1="60" x2="60" y1="22" y2="27" stroke="currentColor" stroke-width="1.5"></line></g><line id="signal-sync-lock-pin" x1="60" x2="60" y1="13" y2="27" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" opacity="0"></line><circle id="signal-sync-core" cx="60" cy="20" r="2.5" fill="var(--pulsar-accent, currentColor)" opacity="0"></circle><circle id="signal-sync-ring" cx="60" cy="20" r="5" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" opacity="0"></circle></svg>
animation.css
.pulsar-signal-sync #signal-sync-tracker-a {
animation: signal-sync-drift-a 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-signal-sync #signal-sync-tracker-b {
animation: signal-sync-drift-b 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-signal-sync #signal-sync-lock-pin {
animation: signal-sync-pin 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 60px 20px;
}
.pulsar-signal-sync #signal-sync-core {
animation: signal-sync-core-anim 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 60px 20px;
}
.pulsar-signal-sync #signal-sync-ring {
animation: signal-sync-ring-anim 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
transform-origin: 60px 20px;
}
@keyframes signal-sync-drift-a {
0%,
10% {
transform: translateX(0);
}
28%,
45% {
transform: translateX(18px);
}
60%,
88% {
transform: translateX(0);
}
96%,
100% {
transform: translateX(0);
}
}
@keyframes signal-sync-drift-b {
0%,
10% {
transform: translateX(0);
}
28%,
45% {
transform: translateX(-18px);
}
60%,
88% {
transform: translateX(0);
}
96%,
100% {
transform: translateX(0);
}
}
@keyframes signal-sync-pin {
0%,
56% {
opacity: 0;
transform: scaleY(0);
}
60%,
86% {
opacity: 1;
transform: scaleY(1);
}
92%,
100% {
opacity: 0;
transform: scaleY(0);
}
}
@keyframes signal-sync-core-anim {
0%,
56% {
opacity: 0;
transform: scale(0);
}
60%,
86% {
opacity: 1;
transform: scale(1);
}
92%,
100% {
opacity: 0;
transform: scale(0);
}
}
@keyframes signal-sync-ring-anim {
0%,
58% {
opacity: 0;
transform: scale(0.6);
}
64% {
opacity: 0.9;
}
78% {
opacity: 0;
transform: scale(2.8);
}
100% {
opacity: 0;
transform: scale(2.8);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-signal-sync * {
animation: none !important;
transform: none;
}
.pulsar-signal-sync #signal-sync-lock-pin,
.pulsar-signal-sync #signal-sync-core {
opacity: 1;
transform: none;
}
}