Minimal Snackbar Component In JavaScript – snacker

Preview:

Description:

snacker is a dead simple JavaScript plugin used to show Android-style snackbars on your web applications. Snackbars provide lightweight feedback about an operation.

They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on screen and only one can be displayed at a time.

How to use it:

Create a container for the snackbar.

<div id="snackbar"></div>

Load the JavaScript file toast.js at the end of the html document.

<script src="toast.js"></script>

Create snackbars as these:

t.snackShow('Some text some message..', 'error');
t.snackShow('Some text some message..', 'info');
t.snackShow('Some text some message..', 'success');

Style & animate the snackbar in the CSS.

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  right: 30px;
  top: 30px;
}
#snackbar.snack {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
 @-webkit-keyframes 
fadein {  from {
right: 0;
opacity: 0;
}
to {
  right: 30px;
  opacity: 1;
}
}
 @keyframes 
fadein {  from {
right: 0;
opacity: 0;
}
to {
  right: 30px;
  opacity: 1;
}
}
 @-webkit-keyframes 
fadeout {  from {
right: 30px;
opacity: 1;
}
to {
  right: 0;
  opacity: 0;
}
}
 @keyframes 
fadeout {  from {
right: 30px;
opacity: 1;
}
to {
  right: 0;
  opacity: 0;
}
}