Hello, guys hope you all are well. Today, we are going to learn Animated Notification with Progress Bar using HTML, CSS & JavaScript.
Toast Notification is the message box that appears from any side of the gadget screen, mainly from the right top side. The message can be a warning message, error message, or some positive message.
At the top, we can see our toast with a progress bar and one cancel button, below it is one button. Actually, at first, there will only be a button, and when we click on the button that toast will appear with progressing bar. Basically, when progress is finished, progressed the toast will automatically disappear or we can close that toast by clicking on the close button.
Animated Toast Notification with Progress Bar using HTML, CSS & JavaScript | Video
You can download all the source code of this project [ Animated Toast Notification with Progress Bar using HTML, CSS & JavaScript ] from resource download
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Progress Bar with Notification</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="container">
<div class="content">
<i class="fa-solid fa-circle-check check"></i>
<div class="message">
<span class="text text-1"> Subscribed </span>
<span class="text text-2"> Thank you for subscribing</span>
</div>
</div>
<i class="fa-solid fa-circle-xmark close"></i>
<div class="progress"></div>
</div>
<button> SUBSCRIBE </button>
<script src="main.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgb(230, 230, 230);
overflow: hidden;
}
.container {
position: absolute;
border-radius: 1em;
background: white;
padding: 2em 1em 2em 2em;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
top: 1em;
right: 2em;
border-left: 0.4em solid rgb(46, 112, 255);
overflow: hidden;
/* after addd active class */
transform: translateX(calc(100% + 2em));
transition: all .5s cubic-bezier(0.65, -0.55, 0.255, 1.35);
}
.container .content {
display: flex;
align-items: center;
}
.content .check {
width: 2em;
height: 2em;
background: rgb(46, 112, 255);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
border-radius: 50%;
}
.content .message {
flex-direction: column;
display: flex;
margin: 0 1em;
}
.message .text {
font-size: 1.3em;
font-weight: 300;
color: rgb(150, 148, 148);
}
.message .text.text-1 {
font-weight: 600;
color: rgb(65, 65, 65);
}
.container .close {
position: absolute;
top: 1em;
right: 1.2em;
padding: .1em;
cursor: pointer;
opacity: 0.5;
}
.container .close:hover {
opacity: 1;
}
button {
padding: 0.8em 1.5em;
font-size: 1.2em;
outline: none;
border: none;
background: #FF0000;
color: white;
cursor: pointer;
transition: 0.3s all;
}
button:hover {
background: #942727;
}
.container .progress {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: .2em;
background: #ddd;
}
.container .progress:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgb(46, 112, 255);
}
.progress.active:before {
animation: progress 5s linear forwards;
}
@keyframes progress {
100% {
right: 100%;
}
}
.container.active {
transform: translateX(0%);
}
JavaScript
const button = document.querySelector("button"),
container = document.querySelector(".container"),
closebutton = document.querySelector(".close"),
progress = document.querySelector(".progress");
button.addEventListener("click", () => {
container.classList.add("active");
progress.classList.add("active");
setTimeout(() => {
container.classList.remove("active");
}, 5000);
setTimeout(() => {
progress.classList.remove("active");
}, 5300);
});
closebutton.addEventListener("click", () => {
container.classList.remove("active");
setTimeout(() => {
progress.classList.remove("active");
}, 300);
});
0 Comments