Floating Toast Alert with Progress Bar

Toast notifications are a useful way to display short messages, status updates, and system feedback without taking users away from the current page. In this project, we create a simple floating toast alert with an animated progress bar using only HTML and CSS.

The component features a dark notification card, an icon, a title, a short description, and a colored progress bar at the bottom. The progress bar uses a CSS keyframe animation that moves from 100% width to 0% width over four seconds.

No external library or JavaScript is required for the basic implementation.

Features

This floating toast alert includes:

• Modern dark toast design

• Floating centered layout

• Status icon

• Notification title and description

• Animated progress bar

• 4-second CSS animation

• Rounded corners

• Subtle shadow effect

• Pure HTML and CSS

• No JavaScript required

• Easy-to-customize colors and content

HTML Structure

The HTML structure is intentionally simple. The .stage element acts as the outer container, while .toast-card contains the complete notification.

<div class="stage">
    <div class="toast-card">
        <div class="tc-body">
            <span>⚡</span>

            <div>
                <strong>Changes Published</strong>
                <p>Your components are live on edge CDN.</p>
            </div>
        </div>

        <div class="tc-prog"></div>
    </div>
</div>

The notification consists of three main parts:

• .stage — controls the outer layout and width.

• .toast-card — creates the main notification box.

• .tc-body — contains the icon and notification content.

• .tc-prog — creates the animated progress bar.

Designing the Toast Card

The toast uses a dark background with a subtle border, rounded corners, and a shadow.

.toast-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

The border-radius property gives the notification its rounded appearance, while box-shadow creates depth and makes the toast visually stand out from the dark page background.

The overflow: hidden property also keeps the progress bar inside the rounded boundaries of the card.

Creating the Toast Content

The .tc-body class uses CSS Flexbox to position the icon next to the notification text.

.tc-body {
    display: flex;
    gap: 12px;
    padding: 16px;
    font-size: 13px;
}

The gap property creates space between the icon and the content, while padding provides comfortable spacing around the notification.

The title is styled separately:

strong {
    display: block;
    font-size: 14px;
}

The description uses a smaller font and a muted color:

p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 12px;
}

This creates a clear visual hierarchy between the notification title and supporting message.

Animated Progress Bar

The main feature of this component is the progress bar at the bottom of the toast.

.tc-prog {
    height: 3px;
    background: #38bdf8;
    width: 100%;
    animation: toastDec 4s linear infinite;
}

The progress bar starts at 100% width. The toastDec animation then gradually reduces its width to zero.

@keyframes toastDec {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

The animation lasts four seconds and uses a linear timing function, which means the progress decreases at a consistent speed.

How the Animation Works

The following declaration controls the animation:

animation: toastDec 4s linear infinite;

It contains three important values:

• toastDec — the name of the keyframe animation.

• 4s — the animation duration.

• linear — keeps the animation speed consistent.

• infinite — continuously repeats the animation.

Because infinite is used, the progress bar restarts after reaching 0%. It does not automatically remove the toast from the page.

If you want the progress animation to run only once, you can remove infinite:

animation: toastDec 4s linear;

However, removing infinite only stops the animation. It does not hide or remove the toast card.

Changing the Notification Message

You can easily customize the title and message by changing the HTML.

For example:

<strong>Profile Updated</strong>
<p>Your profile has been updated successfully.</p>

You can also replace the existing lightning icon:

<span>✓</span>

This allows the same component to be used for different notification types.

Changing the Progress Bar Color

The progress bar currently uses a light blue color:

background: #38bdf8;

You can change this value to match your website design.

For example:

background: #22c55e;

could be used for a green success notification, while:

background: #f59e0b;

could be used for a warning-style notification.

Changing the Animation Duration

The progress animation currently takes four seconds:

animation: toastDec 4s linear infinite;

To make it faster, you could use two seconds:

animation: toastDec 2s linear infinite;

To make it slower, you could use six seconds:

animation: toastDec 6s linear infinite;

This provides an easy way to control how quickly the progress indicator completes.

Customizing the Toast Width

The .stage class controls the width of the component:

.stage {
    padding: 40px;
    width: 340px;
}

You can increase or decrease the width depending on your layout.

For example:

.stage {
    padding: 40px;
    width: 400px;
}

This can be useful when the notification needs to display longer messages.

Centering the Toast

The page uses CSS Grid to center the notification:

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #0b0f19;
    font-family: system-ui, sans-serif;
}

The place-items: center declaration centers the toast horizontally and vertically within the viewport.

The dark #0b0f19 background also complements the dark toast card.

Where Can You Use This Toast?

This component can be used for many types of website notifications, such as:

• Changes published

• Profile updates

• Settings saved

• Deployment notifications

• Form submission feedback

• System status messages

• Dashboard notifications

• Application updates

• Developer tools

• SaaS interfaces

Because the structure is simple, it can also be adapted to existing HTML and CSS projects.

HTML and CSS Only

One of the main advantages of this example is that it does not require JavaScript.

The toast card, styling, layout, and progress animation are all created with HTML and CSS.

This makes the component useful as a lightweight starting point when you only need a visual notification with an animated progress indicator.

However, if you need functionality such as automatically hiding the toast, manually closing it, dynamically creating notifications, or controlling the timer with user interaction, JavaScript would be required.

Conclusion

This Floating Toast Alert with Progress Bar provides a simple and modern notification design using pure HTML and CSS. It combines a dark rounded card, status icon, notification content, and a four-second animated progress bar.

The CSS animation continuously moves the progress bar from 100% to 0% and then repeats because the animation uses the infinite value.

The component is lightweight and easy to customize, making it a useful starting point for notification interfaces, dashboards, SaaS applications, developer tools, and other modern websites.