CSS Status Indicators with Pulsing Animation

CSS Status Indicators are super important in modern web design to give users real time feedback about system states or user activities. These tiny components help with communication, reduce uncertainty and overall user experience.

What are Status Indicators?

A status indicator is a UI component that communicates the current state of a system, user or process. Examples include online/offline indicators, progress states or warning messages.

HTML Structure

<p class="sf-indicator">
  <span class="status-dot status-green"></span>
  <span class="status-text">User is online</span>
</p>

<p class="sf-indicator">
  <span class="status-dot status-red"></span>
  <span class="status-text">User is offline</span>
</p>

<p class="sf-indicator">
  <span class="status-dot status-orange"></span>
  <span class="status-text">User is away</span>
</p>

Styling the CSS Status Indicators

/* --------------------------------------------------- */
/*  Snippflow Status Indicators with Pulsing Animation */
/* --------------------------------------------------- */

.sf-indicator {
  --sf-indicator-size: 8px;
  --sf-indicator-green: #0bbf0b;
  --sf-indicator-red: #c51b1b;
  --sf-indicator-orange: #db8719;
}

.sf-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.sf-indicator .status-dot {
  width: var(--sf-indicator-size);
  height: var(--sf-indicator-size);
  border-radius: 50%;
  position: relative;
}

.sf-indicator .status-dot::before,
.sf-indicator .status-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: sf-indicator-pulse 2s infinite linear;
  opacity: 0.3;
}

.sf-indicator .status-dot::after {
  animation-delay: 1s;
}

@keyframes sf-indicator-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.status-green { background-color: var(--sf-indicator-green); }
.status-red { background-color: var(--sf-indicator-red); }
.status-orange { background-color: var(--sf-indicator-orange); }

Benefits of Status Indicators

• Clarity: Tells users what’s happening now
• Usability: Reduces decision making by manual checks.
• Aesthetic: Adds pro and dynamic to interfaces.

Best Practices

• Color-Coding: Use obvious colors (e.g. green for “online”, red for “offline”) so users can understand the status.
• Consistency: Be consistent across all indicators for a seamless user experience.
• Animation: Subtle effects like pulsing or blinking to grab attention without overwhelming.
• Accessibility: Include alternative text or tooltips for visually impaired users.

Examples

• E-commerce: Stock, order progress, delivery status.
• Social: User activity (e.g. “online now”).
• Apps: System health or connected status.

See the Pen Status Indicators with Pulsing Animation by Snippflow (@snippflow) on CodePen.