Building Web Notifications with Progress Bar using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to implement a seamless notification system using HTML, CSS, and JavaScript. Enhance user interaction with our step-by-step guide on progress bar integration.

Join us on Telegram
Building Web Notifications with Progress Bar using HTML, CSS, and JavaScript.jpg
Read AlsoCreating a Responsive Pet Store Landing Page using HTML & CSS.jpgCreating a Responsive Pet Store Landing Page using HTML and CSS (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

In the ever-evolving realm of web development, prioritizing user experience stands as a fundamental goal. This comprehensive guide is designed to lead you through the process of crafting a notification system with an integrated progress bar. By harnessing the power of HTML, CSS, and JavaScript, you'll not only enhance user engagement but also streamline the communication of lengthy processes within your web applications. Join us on this journey to elevate your front-end development skills and deliver a seamless, interactive user experience.

Let's start making an amazing notification system with an integrated progress bar using HTML, CSS, and JavaScript step by step.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To begin, create the foundational HTML structure for your notification system. Use semantic tags to enhance accessibility and maintainability. Let's break down the HTML code:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which is HTML5 in this case.

2. <html lang="en">: This tag defines the root of the HTML document and sets the language attribute to English ("en").

3. <head>: This section contains meta-information about the HTML document, including the character set, viewport settings, external stylesheets, and the document title.

  • <meta charset="UTF-8" />: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport properties for responsive design, ensuring the width is equal to the device width, and the initial zoom level is 1.
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />: Links an external stylesheet for Font Awesome, a library of scalable vector icons.
  • <link rel="stylesheet" href="styles.css" />: Links another external stylesheet named "styles.css" for additional styling.
  • <title>Toast Notification with Progress Bar</title>: Sets the title of the HTML document, which appears in the browser's title bar or tab.

4. <body>: This is the main content of the HTML document.

5. <div class="toast">: Defines a container for a toast notification with a progress bar.

  • <div class="toast-content">: Contains the content of the toast.
  • <i class="fas fa-solid fa-check check"></i>: Displays a Font Awesome icon representing a checkmark.
  • <div class="message">: Contains the message content.
  • <span class="text text-1">Success</span>: Displays the text "Success."
  • <span class="text text-2">Your changes have been saved</span>: Displays a secondary text indicating that changes have been saved.
  • <i class="fa-solid fa-xmark close"></i>: Displays a Font Awesome icon representing an "x" mark, typically used for closing or dismissing the toast.
  • <div class="progress"></div>: Represents a container for a progress bar, which will be dynamically filled to indicate progress.

6. <button>Show Toast</button>: Creates a button with the label "Show Toast." This button triggers the display of the toast notification.

7. <script src="script.js"></script>: Links an external JavaScript file named "script.js" to provide functionality for the HTML document. The script is expected to contain logic for showing and handling the toast notification.

Read AlsoBuild a Simple Calculator HTML, CSS, JavaScript Tutorial.webpBuild a Simple Calculator: HTML, CSS, JavaScript Tutorial (Source Code)

Step 2 (CSS Code):

Apply styles to make your notifications visually appealing and cohesive with your website's design. CSS will handle the presentation layer of the notification system. Let's break down the code section by section:

1. * Selector:

  • Sets default styles for all elements.
  • Resets margin and padding to 0.
  • Uses the border-box model.
  • Applies the sans-serif font family.

2. body Selector:

  • Sets the body height to 100% of the viewport height (100vh).
  • Uses flexbox to center content both vertically and horizontally.
  • Sets the background color to #f4f7ff.
  • Hides overflow.

3. .toast Class:

  • Styles for the toast container.
  • Positioned absolutely in the top-right corner.
  • Has a border radius of 12px.
  • White background with padding.
  • Box shadow for a subtle shadow effect.
  • Initially positioned outside the viewport (translateX(calc(100% + 30px))).
  • Has a transition for smooth animation.

4. .toast.active Class:

  • Overrides the transform property to bring the toast into view.

5. .toast .toast-content:

  • Styles for the content inside the toast.
  • Uses flexbox to align items.

6. .toast-content .check and .toast-content .message:

  • Styles for the checkmark and message sections inside the toast.
  • Checkmark has a circular background with a blue color.
  • Message section has some margin.

7. .toast .close:

  • Styles for the close button inside the toast.
  • Positioned in the top-right corner.
  • Has a hover effect.

8. .toast .progress and .toast .progress:before:

  • Styles for the progress bar at the bottom of the toast.
  • Uses pseudo-elements to create the progress bar.
  • The progress bar is initially inactive and becomes active through the progress animation.

9. @keyframes progress:

  • Defines an animation that moves the progress bar from right to left over 5 seconds.

10. button and button:hover:

  • Styles for the button that triggers the toast.
  • Uses a blue background color with white text.
  • Hover effect changes the background color.

11. .toast.active ~ button:

  • Disables pointer events for the button when the toast is active.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f7ff;
  overflow: hidden;
}

.toast {
  position: absolute;
  top: 25px;
  right: 30px;
  border-radius: 12px;
  background: #fff;
  padding: 20px 35px 20px 25px;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateX(calc(100% + 30px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}

.toast.active {
  transform: translateX(0%);
}

.toast .toast-content {
  display: flex;
  align-items: center;
}

.toast-content .check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 35px;
  background-color: #2770ff;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.toast-content .message {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}

.message .text {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}

.message .text.text-1 {
  font-weight: 600;
  color: #333;
}

.toast .close {
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
}

.toast .close:hover {
  opacity: 1;
}

.toast .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;

}

.toast .progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #2770ff;
}

.progress.active:before {
  animation: progress 5s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

button {
  padding: 12px 20px;
  font-size: 20px;
  outline: none;
  border: none;
  background-color: #2770ff;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background-color: #2770ff;
}

.toast.active ~ button {
  pointer-events: none;
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. Let's break down the code step by step:

1. Element Selection:

const button = document.querySelector("button"),
  toast = document.querySelector(".toast"),
  closeIcon = document.querySelector(".close"),
  progress = document.querySelector(".progress");

Here, the code is selecting HTML elements using the querySelector method. It is assumed that there is an HTML button, a toast element, a close icon element, and a progress bar element in the document.

2. Initialization of Timers:

let timer1, timer2;

This declares two variables timer1 and timer2 without assigning any initial value. These variables will be used to store the timeout IDs returned by setTimeout function.

3. Button Click Event:

button.addEventListener("click", () => {
  toast.classList.add("active");
  progress.classList.add("active");

  timer1 = setTimeout(() => {
    toast.classList.remove("active");
  }, 5000);

  timer2 = setTimeout(() => {
    progress.classList.remove("active");
  }, 5300);
});

When the button is clicked, the code adds the "active" class to both the toast and progress elements. It then sets up two timers using setTimeout:

  • timer1 removes the "active" class from the toast element after 5000 milliseconds (5 seconds).
  • timer2 removes the "active" class from the progress element after 5300 milliseconds (5.3 seconds).

4. Close Icon Click Event:

closeIcon.addEventListener("click", () => {
  toast.classList.remove("active");

  setTimeout(() => {
    progress.classList.remove("active");
  }, 300);

  clearTimeout(timer1);
  clearTimeout(timer2);
});

When the close icon is clicked, the code removes the "active" class from the toast element. It also sets up a timer to remove the "active" class from the progress element after 300 milliseconds (0.3 seconds). Additionally, it clears both timer1 and timer2 using clearTimeout to prevent the execution of the functions scheduled by setTimeout in the button click event.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

const button = document.querySelector("button"),
  toast = document.querySelector(".toast");
(closeIcon = document.querySelector(".close")),
  (progress = document.querySelector(".progress"));

let timer1, timer2;

button.addEventListener("click", () => {
  toast.classList.add("active");
  progress.classList.add("active");

  timer1 = setTimeout(() => {
    toast.classList.remove("active");
  }, 5000); //1s = 1000 milliseconds

  timer2 = setTimeout(() => {
    progress.classList.remove("active");
  }, 5300);
});

closeIcon.addEventListener("click", () => {
  toast.classList.remove("active");

  setTimeout(() => {
    progress.classList.remove("active");
  }, 300);

  clearTimeout(timer1);
  clearTimeout(timer2);
});

Final Output:

Building Web Notifications with Progress Bar using HTML, CSS, and JavaScript.gif
Read AlsoHow to Create a Liquid Button with HTML, CSS, and JavaScript.jpgHow to Create a Liquid Button with HTML, CSS, and JavaScript (Source Code)

Conclusion:

Congratulations! You've successfully implemented a notification system with a progress bar using HTML, CSS, and JavaScript. Elevate your web applications with this user-friendly and visually appealing feature.

Credit: Tilak

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: notification bar, progress bar, html, css, javascript, web development, source code, interactive progress bar, frontend development
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺