Animated Alert Banner In Vanilla JavaScript – Dismissible

Preview:

Description:

Dismissible is a simple plain JavaScript library that creates an animated top banner to inform users about error, info, or success messages on the web app.

How to use it:

1. Load the Dismissible’s JavaScript and CSS in the document.

<link rel="stylesheet" href="./src/dismissible.css" />
<script src="./src/dismissible.js"></script>

2. Load the necessary LineIcons for the alert icons.

<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet" />

3. Create a container to hold the alert banner.

<div id="dismissible-container"></div>

4. Create a new Dismissible instance.

const dismissible = new Dismissible(document.querySelector('#dismissible-container'));

5. Create an ‘Info’ alert banner.

dismissible.info('This is an informational alert!')

6. Create a ‘Success’ alert banner.

dismissible.success('Everything was okay!')

7. Create an ‘Error’ alert banner.

dismissible.error('Oops! Something went wrong...')