Custom Toast notification with Progress Bar

1<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'>
2<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'>
3
4<div class="toast active">
5  <div class="toast-content">
6    <i class="fas fa-solid fa-check check"></i>
7    <div class="message">
8      <span class="text text-1">Success</span>
9      <span class="text text-2">Your changes has been saved</span>
10    </div>
11  </div>
12  <i class="fa-solid fa-xmark close"></i>
13  <div class="progress active"></div>
14</div>
15
16<button>Show Toast</button>