Snackbar with Animated Progress Bar

CSS Snackbar is a design component in modern web and mobile apps that delivers quick, short feedback without interrupting the user. Unlike modal popups or alerts, snackbars are unobtrusive, often at the bottom of the screen and disappear after a short time, perfect for lightweight, temporary messages.

HTML Structure

<div class="sf-snackbar">
  <span class="snackbar-icon"><i class="fa-solid fa-check"></i></span>
  <div class="snackbar-message">This is a default message.</div>
  <div class="snackbar-action"><a href="#">View page</a></div>
</div>

<div class="sf-snackbar sf-snackbar-info">
  <span class="snackbar-icon"><i class="fa-solid fa-info"></i></span>
  <div class="snackbar-message">This is an info message.</div>
  <div class="snackbar-action"><a href="#">View page</a></div>
</div>

<div class="sf-snackbar sf-snackbar-warning">
  <span class="snackbar-icon"><i class="fa-solid fa-exclamation"></i></span>
  <div class="snackbar-message">This is a warning message.</div>
  <div class="snackbar-action"><a href="#">View page</a></div>
</div>

<div class="sf-snackbar sf-snackbar-error">
  <span class="snackbar-icon"><i class="fa-solid fa-xmark"></i></span>
  <div class="snackbar-message">This is an error message.</div>
  <div class="snackbar-action"><a href="#">View page</a></div>
</div>

Styling the CSS Snackbar

/* -------------------- */
/*  Snippflow Snackbar  */
/* -------------------- */

.sf-snackbar {
  --sf-snackbar-bg: #fff;
  --sf-snackbar-color: #3b495e;
  --sf-snackbar-border: #e7e8ea;
  --sf-snackbar-shadow: 0px 0px 8px 0px rgba(0,0,0,.06);
  --sf-snackbar-bar-bg: #24A47B;
  --sf-snackbar-icon-bg: rgba(0,0,0,.03);
  --sf-snackbar-link: #46a787;
  --sf-snackbar-link-hover: #3c9376;
}

.sf-snackbar { display: inline-flex; align-items: center; overflow: hidden; position: absolute; left: 40px; bottom: 40px; background: var(--sf-snackbar-bg); border: 1px solid var(--sf-snackbar-border); color: var(--sf-snackbar-color); box-shadow: var(--sf-snackbar-shadow); padding: 10px 15px; border-radius: 3px; font-size: 13px; line-height: 1.5; }
.sf-snackbar:after { content: ""; display: block; width: 100%; height: 3px; background-color: var(--sf-snackbar-bar-bg); position: absolute; left: 0; top: 0; animation: snackbar-animation 5s forwards linear; }
.sf-snackbar .snackbar-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background-color: var(--sf-snackbar-icon-bg); border-radius: 100%; margin-right: 10px; }
.sf-snackbar .snackbar-message { margin-right: 20px; }
.sf-snackbar .snackbar-action a { color: var(--sf-snackbar-link); text-decoration: underline; }
.sf-snackbar .snackbar-action a:hover { color: var(--sf-snackbar-link-hover); text-decoration: none; }

.sf-snackbar-info{ border-color: #c9e0f5;}
.sf-snackbar-info .snackbar-icon{ color: #0084ff; }
.sf-snackbar-warning{ border-color: #f4dbb7;}
.sf-snackbar-warning .snackbar-icon{ color: #ff9800; }
.sf-snackbar-error{ border-color: #f1cfcd;}
.sf-snackbar-error .snackbar-icon{ color: #f44336; }

@keyframes snackbar-animation {
  from {width: 100%;}
  to {width: 0%;}
}

Why Snackbars are good for UX

1. Minimal disruption: Snackbars don’t block the user’s workflow. They appear and disappear automatically so the user can stay focused on what they’re doing.
2. Contextual Feedback: Snackbars provide feedback tied to a specific action, like a save success or temporary error.
3. Clear Communication: With short text and optional action buttons, snackbars communicate the important information without overwhelming the user.

Snackbar UX Best Practices

1. Be concise: Keep the message to one or two sentences to stay clear and not overwhelm the user.
2. Timing: Show the snackbar for 3-5 seconds so users have time to read it without lingering.
3. Visual Hierarchy: Use colors and icons to distinguish between success, error, warning and info messages.
4. Optional Actions: Include a button for secondary actions when needed (e.g. “UNDO” for accidental deletes) but don’t clutter the design.

When not to use Snackbars

• Don’t use snackbars for critical messages that require user input or acknowledgement. In those cases a modal dialog or toast notification might be better.
• Don’t over-snack your app, they can get annoying.

See the Pen Snackbar with Animated Progress Bar by Snippflow (@snippflow) on CodePen.

See also: Floating Icon Bar with tooltips