CSS Banners & Alerts 08 / 14

CSS Pulsing Banner for Live Updates

Four live-update CSS banners in a dark broadcast / newsroom aesthetic — a Breaking News ticker with seamless duplicate-string loop, a System Status bar with pulsing box-shadow ring orbs (operational green, 99.98% uptime, P50 latency), a Degraded service banner with sweeping diagonal glow scan + subtle shake animation, and a Live Coverage bar with viewer count + clip-path chevron badge. Every banner uses pure CSS animations — no JS required for the live feel. Barlow Condensed + Barlow. Best for status pages, live broadcasts, real-time dashboards, news sites.

Best forstatus pages, live broadcasts, real-time dashboards, news sites.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ba-pul" aria-label="Pulsing live updates banner demo">
  <span class="section-mark">— Live status banners —</span>

  <div class="banner banner--breaking">
    <div class="breaking-pill">
      <span class="live-dot" aria-hidden="true"></span>
      <span class="breaking-label">Breaking</span>
    </div>
    <div class="breaking-ticker">
      <div class="ticker-track">
        <span>API response times elevated across US-East-1 · Engineers investigating</span>
        <span class="ticker-sep">◆</span>
        <span>New deployment pipeline rolled out to 30% of production fleet</span>
        <span class="ticker-sep">◆</span>
        <span>Incident INC-9341 opened · ETA unknown · Follow status page for updates</span>
        <span class="ticker-sep">◆</span>
        <span>API response times elevated across US-East-1 · Engineers investigating</span>
        <span class="ticker-sep">◆</span>
        <span>New deployment pipeline rolled out to 30% of production fleet</span>
        <span class="ticker-sep">◆</span>
        <span>Incident INC-9341 opened · ETA unknown · Follow status page for updates</span>
        <span class="ticker-sep">◆</span>
      </div>
    </div>
  </div>

  <div class="banner banner--status">
    <div class="status-left">
      <div class="status-orb-wrap" aria-hidden="true">
        <div class="status-orb status-orb--green"></div>
        <div class="status-orb-ring"></div>
      </div>
      <div class="status-text">
        <div class="status-name status-name-green">All Systems Operational</div>
        <div class="status-desc">100% uptime in the last 30 days · Last checked 12 seconds ago</div>
      </div>
    </div>
    <div class="status-right">
      <div class="status-stat"><div class="status-stat-val status-val-green">99.98%</div><div class="status-stat-label">Uptime</div></div>
      <div class="status-divider" aria-hidden="true"></div>
      <div class="status-stat"><div class="status-stat-val">43ms</div><div class="status-stat-label">P50 Latency</div></div>
      <div class="status-divider" aria-hidden="true"></div>
      <div class="status-stat"><div class="status-stat-val">0</div><div class="status-stat-label">Open Incidents</div></div>
    </div>
  </div>

  <div class="banner banner--degraded">
    <div class="degraded-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
    <div class="degraded-content">
      <div class="degraded-title">Webhook Delivery Delayed<span class="degraded-badge">Degraded</span></div>
      <div class="degraded-desc">Webhook retries are experiencing delays of 8–14 minutes. Deliveries are queued and will complete once backlog clears.</div>
    </div>
    <div class="degraded-time">Since 14:32 UTC</div>
  </div>

  <div class="banner banner--live">
    <div class="live-badge">
      <div class="live-badge-dot" aria-hidden="true"></div>
      <div class="live-badge-text">Live</div>
    </div>
    <div class="live-content">
      <div>
        <div class="live-headline">Q2 Earnings Call — CEO addressing analyst questions now</div>
        <div class="live-meta">Stream started 34 minutes ago · Replay available after event</div>
      </div>
      <div class="live-viewers">
        <div class="live-viewers-num">4,821</div>
        <div class="live-viewers-label">Watching</div>
      </div>
    </div>
  </div>
</section>
/* ─── 08 Pulsing Banner for Live Updates — broadcast ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,700&family=Barlow:wght@300;400;500&display=swap');

.ba-pul {
  --ba-pul-bg: #080a0e;
  --ba-pul-surface: #0f1218;
  --ba-pul-border: rgba(255,255,255,0.06);
  --ba-pul-text: #e8ecf4;
  --ba-pul-muted: rgba(232,236,244,0.45);
  --ba-pul-red: #ff3b30;
  --ba-pul-green: #30d158;
  --ba-pul-amber: #ffd60a;
  --ba-pul-blue: #0a84ff;

  position: relative;
  width: 100%;
  min-height: 540px;
  background: var(--ba-pul-bg);
  background-image: radial-gradient(ellipse 70% 30% at 50% 0%, rgba(255,59,48,0.04) 0%, transparent 60%);
  font-family: 'Barlow', sans-serif;
  color: var(--ba-pul-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: 48px 16px;
  box-sizing: border-box;
}
.ba-pul *, .ba-pul *::before, .ba-pul *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-pul .section-mark { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.15); align-self: flex-start; max-width: 760px; width: 100%; }
.ba-pul .banner { width: 100%; max-width: 760px; position: relative; overflow: hidden; }

.ba-pul .banner--breaking { background: var(--ba-pul-surface); border: 1px solid rgba(255,59,48,0.2); border-left: 3px solid var(--ba-pul-red); display: flex; align-items: stretch; height: 52px; }
.ba-pul .breaking-pill { background: var(--ba-pul-red); display: flex; align-items: center; gap: 8px; padding: 0 28px 0 18px; flex-shrink: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.ba-pul .live-dot { width: 8px; height: 8px; border-radius: 50%; background: white; flex-shrink: 0; animation: ba-pul-livePulse 1.8s ease-in-out infinite; }
@keyframes ba-pul-livePulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
.ba-pul .breaking-label { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: white; white-space: nowrap; }
.ba-pul .breaking-ticker { flex: 1; overflow: hidden; display: flex; align-items: center; padding: 0 16px; position: relative; }
.ba-pul .breaking-ticker::before, .ba-pul .breaking-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 2; pointer-events: none; }
.ba-pul .breaking-ticker::before { left: 0; background: linear-gradient(90deg, var(--ba-pul-surface), transparent); }
.ba-pul .breaking-ticker::after { right: 0; background: linear-gradient(-90deg, var(--ba-pul-surface), transparent); }
.ba-pul .ticker-track { display: flex; gap: 64px; white-space: nowrap; animation: ba-pul-scroll 22s linear infinite; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; color: var(--ba-pul-text); letter-spacing: 0.04em; }
@keyframes ba-pul-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ba-pul .ticker-sep { color: var(--ba-pul-red); opacity: 0.7; }

.ba-pul .banner--status { background: var(--ba-pul-surface); border: 1px solid var(--ba-pul-border); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ba-pul .status-left { display: flex; align-items: center; gap: 14px; }
.ba-pul .status-orb-wrap { position: relative; width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ba-pul .status-orb { width: 10px; height: 10px; border-radius: 50%; position: relative; z-index: 1; }
.ba-pul .status-orb--green { background: var(--ba-pul-green); }
.ba-pul .status-orb-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--ba-pul-green); animation: ba-pul-ring 2s ease-out infinite; }
@keyframes ba-pul-ring { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.ba-pul .status-name { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ba-pul .status-name-green { color: var(--ba-pul-green); }
.ba-pul .status-desc { font-size: 12px; color: var(--ba-pul-muted); margin-top: 1px; }
.ba-pul .status-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.ba-pul .status-stat { text-align: right; }
.ba-pul .status-stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; line-height: 1; animation: ba-pul-blink 3s ease-in-out infinite; color: var(--ba-pul-text); }
.ba-pul .status-val-green { color: var(--ba-pul-green); }
@keyframes ba-pul-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.ba-pul .status-stat-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ba-pul-muted); margin-top: 2px; }
.ba-pul .status-divider { width: 1px; height: 32px; background: var(--ba-pul-border); }

.ba-pul .banner--degraded { background: rgba(255, 214, 10, 0.05); border: 1px solid rgba(255, 214, 10, 0.2); padding: 12px 20px; display: flex; align-items: center; gap: 14px; }
.ba-pul .banner--degraded::before { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, transparent, rgba(255,214,10,0.15), transparent); animation: ba-pul-sweep 3s ease-in-out infinite; }
@keyframes ba-pul-sweep { from { left: -60px; } to { left: 110%; } }
.ba-pul .degraded-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: rgba(255,214,10,0.1); border: 1px solid rgba(255,214,10,0.3); display: flex; align-items: center; justify-content: center; animation: ba-pul-shake 4s ease-in-out infinite; }
@keyframes ba-pul-shake { 0%,90%,100% { transform: rotate(0); } 92% { transform: rotate(-3deg); } 94% { transform: rotate(3deg); } 96% { transform: rotate(-2deg); } 98% { transform: rotate(1deg); } }
.ba-pul .degraded-icon svg { width: 18px; height: 18px; color: var(--ba-pul-amber); }
.ba-pul .degraded-content { flex: 1; position: relative; z-index: 1; }
.ba-pul .degraded-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ba-pul-amber); display: flex; align-items: center; gap: 8px; }
.ba-pul .degraded-badge { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; padding: 2px 6px; border: 1px solid rgba(255,214,10,0.4); color: var(--ba-pul-amber); border-radius: 3px; animation: ba-pul-badgePulse 1.5s ease-in-out infinite; }
@keyframes ba-pul-badgePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.ba-pul .degraded-desc { font-size: 12px; color: var(--ba-pul-muted); margin-top: 2px; line-height: 1.5; }
.ba-pul .degraded-time { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: rgba(255,214,10,0.5); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.08em; }

.ba-pul .banner--live { background: var(--ba-pul-surface); border: 1px solid rgba(10,132,255,0.2); padding: 0; display: flex; align-items: stretch; }
.ba-pul .live-badge { background: var(--ba-pul-blue); padding: 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; position: relative; }
.ba-pul .live-badge::after { content: ''; position: absolute; top: 0; bottom: 0; right: -12px; width: 24px; background: var(--ba-pul-blue); clip-path: polygon(0 0, 0 100%, 100% 50%); }
.ba-pul .live-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: white; animation: ba-pul-livePulse 1.5s ease-in-out infinite; }
.ba-pul .live-badge-text { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: white; text-transform: uppercase; }
.ba-pul .live-content { flex: 1; padding: 12px 20px 12px 28px; display: flex; align-items: center; gap: 16px; }
.ba-pul .live-headline { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; color: var(--ba-pul-text); line-height: 1.3; letter-spacing: 0.02em; }
.ba-pul .live-meta { font-size: 11px; color: var(--ba-pul-muted); margin-top: 2px; font-style: italic; }
.ba-pul .live-viewers { text-align: right; flex-shrink: 0; }
.ba-pul .live-viewers-num { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: var(--ba-pul-blue); line-height: 1; animation: ba-pul-blink 2s ease-in-out infinite; }
.ba-pul .live-viewers-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ba-pul-muted); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) { .ba-pul *, .ba-pul *::before, .ba-pul *::after { animation: none !important; } }

More from CSS Banners & Alerts

CSS Toast Notification Alert Top RightCSS Banner with Diagonal Slash BackgroundCSS Gradient Animated Border AlertSemantic Bootstrap-style Alerts CSSInline Form Validation Alert CSSMinimalist Border Left CSS AlertResponsive Full Width Hero Banner CSSMaterial Design Floating Alert CardCSS Text Wrap Banner with Long StringsDismissible CSS Alert with Close ButtonSticky Top Announcement Banner CSSCSS Cookie Consent Banner Bottom
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →