Pulsar
Deployment target reticle verifying host connections with telemetry health meters

Deployment Target

CSS

An inner concentric ring rotates inside a target reticle as a horizontal bar chart measures successful host connections.

Tier
CSS
Dependencies
None
Duration
3.6 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
deploy
Tags
loopprogresslineui

Companion assets

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

Animated
Deployment target reticle verifying host connections with telemetry health meters
CSS tier
Static vector
Deployment Target, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-target-title" class="pulsar pulsar-deploy-target" data-pulsar="deploy-target" role="img" viewBox="0 0 160 96"><title id="deploy-target-title">Deployment target reticle verifying host connections with telemetry health meters</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="deploy-target-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="deploy-target-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><circle cx="52" cy="48" r="18" opacity=".4"></circle><line x1="52" x2="52" y1="26" y2="30"></line><line x1="52" x2="52" y1="66" y2="70"></line><line x1="30" x2="34" y1="48" y2="48"></line><line x1="70" x2="74" y1="48" y2="48"></line><circle id="deploy-target-inner-ring" cx="52" cy="48" r="10" stroke-dasharray="8 8"></circle></g><circle id="deploy-target-core" cx="52" cy="48" r="2.5" fill="currentColor"></circle><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.5"><line x1="86" x2="128" y1="36" y2="36" opacity=".25"></line><line x1="86" x2="128" y1="48" y2="48" opacity=".25"></line><line x1="86" x2="128" y1="60" y2="60" opacity=".25"></line><line id="deploy-target-fill-1" x1="86" x2="128" y1="36" y2="36" stroke-dasharray="42" stroke-dashoffset="42"></line><line id="deploy-target-fill-2" x1="86" x2="128" y1="48" y2="48" stroke-dasharray="42" stroke-dashoffset="42"></line><line id="deploy-target-fill-3" x1="86" x2="128" y1="60" y2="60" stroke-dasharray="42" stroke-dashoffset="42"></line></g><circle id="deploy-target-pip-1" cx="134" cy="36" r="2" fill="currentColor" opacity=".3"></circle><circle id="deploy-target-pip-2" cx="134" cy="48" r="2" fill="currentColor" opacity=".3"></circle><circle id="deploy-target-pip-3" cx="134" cy="60" r="2" fill="currentColor" opacity=".3"></circle></svg>

animation.css

.pulsar-deploy-target {
  --pulsar-accent: currentColor;
}

.pulsar-deploy-target #deploy-target-core {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-target #deploy-target-inner-ring,
.pulsar-deploy-target #deploy-target-fill-1,
.pulsar-deploy-target #deploy-target-fill-2,
.pulsar-deploy-target #deploy-target-fill-3 {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-target #deploy-target-inner-ring {
  animation: deploy-target-rotate 3600ms linear infinite;
  transform-origin: 52px 48px;
}

.pulsar-deploy-target #deploy-target-fill-1 {
  animation: deploy-target-f1 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-target #deploy-target-fill-2 {
  animation: deploy-target-f2 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-target #deploy-target-fill-3 {
  animation: deploy-target-f3 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-target #deploy-target-pip-1 {
  animation: deploy-target-p1 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-target #deploy-target-pip-2 {
  animation: deploy-target-p2 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-target #deploy-target-pip-3 {
  animation: deploy-target-p3 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes deploy-target-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes deploy-target-f1 {
  0%,
  10% {
    stroke-dashoffset: 42;
    opacity: 0.3;
  }
  30%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: 42;
    opacity: 0.3;
  }
}

@keyframes deploy-target-f2 {
  0%,
  25% {
    stroke-dashoffset: 42;
    opacity: 0.3;
  }
  45%,
  88% {
    stroke-dashoffset: 8;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: 42;
    opacity: 0.3;
  }
}

@keyframes deploy-target-f3 {
  0%,
  40% {
    stroke-dashoffset: 42;
    opacity: 0.3;
  }
  60%,
  88% {
    stroke-dashoffset: 4;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: 42;
    opacity: 0.3;
  }
}

@keyframes deploy-target-p1 {
  0%,
  24% {
    fill: currentColor;
    opacity: 0.3;
  }
  30%,
  88% {
    fill: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    fill: currentColor;
    opacity: 0.3;
  }
}

@keyframes deploy-target-p2 {
  0%,
  39% {
    fill: currentColor;
    opacity: 0.3;
  }
  45%,
  88% {
    fill: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    fill: currentColor;
    opacity: 0.3;
  }
}

@keyframes deploy-target-p3 {
  0%,
  54% {
    fill: currentColor;
    opacity: 0.3;
  }
  60%,
  88% {
    fill: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    fill: currentColor;
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-target * {
    animation: none !important;
    transform: none;
  }
  .pulsar-deploy-target #deploy-target-fill-1,
  .pulsar-deploy-target #deploy-target-fill-2,
  .pulsar-deploy-target #deploy-target-fill-3 {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .pulsar-deploy-target #deploy-target-pip-1,
  .pulsar-deploy-target #deploy-target-pip-2,
  .pulsar-deploy-target #deploy-target-pip-3 {
    fill: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
}

From this family15 in Deploy

See the family