Alert Close Auto with Life

Alert that is automatically dismissed after 5 seconds with a bar that shows how long is left.

Example

Code

Avoid doing this with JavaScript, instead use CSS. In this example I'm using Tailwind CSS:

theme: {
  extend: {
    keyframes: {
      life: {
        "0%": { width: "100%" },
        "100%": { width: "0%" },
      },
    },
    animation: {
      life: "life 4750ms linear forwards",
    },
  },
},

As a personal preference, I've set the animation to finish before the alert auto closes.