Press "Enter" to skip to content
Notiflix-Notification

Notiflix Notification, Popup Boxes, Loading Indicators, and More in JavaScript Library

By webcodeflow

Notiflix is the JavaScript library of client-side unblocked notifications, popups, load indicators, and more that makes your web projects so much better.

Notiflix is a versatile, highly effective, and customizable notification popup library that sends various kinds of notification messages to the consumer.

Features:

  • Toast-like alert notifications: Success, Failure, Warning, and Info.
  • Confirmation popup packing containers.
  • Report dialog packing containers: Success, Failure, Warning, and Info.
  • 6 loading indicators: Standard, Hourglass, Circle, Arrows, Dots, and Pulse.

How to make use of it:

Installation:

# Yarn
$ yarn add notiflix

# NPM
$ npm install notiflix --save

Load the required JavaScript and CSS records data within the doc.

<link rel="stylesheet" href="notiflix-version.min.css" />
<script src="notiflix-version.min.js"></script>

Create an alert notification.

Notiflix.Notify.Init({
  width: '280px',
  position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' && v2.2.0 and the next versions => 'center-top' - 'center-bottom' - 'center-center'
  distance: '10px',
  opacity: 1,
  borderRadius: '5px',
  rtl: false,
  timeout: 3000,
  messageMaxLength: 110,
  backOverlay: false,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  plainText: true,
  showOnlyTheLastOne: false,
  clickToClose: false,
  ID: 'NotiflixNotify',
  className: 'notiflix-notify',
  zindex: 4001,
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  fontFamily: 'Quicksand',
  fontSize: '13px',
  cssAnimation: true,
  cssAnimationDuration: 400,
  cssAnimationStyle: 'fade', // 'fade' - 'zoom' - 'from-right' - 'from-top' - 'from-bottom' - 'from-left'
  closeButton: false,
  useIcon: true,
  useFontAwesome: false,
  fontAwesomeIconStyle: 'basic', // 'basic' - 'shadow'
  fontAwesomeIconSize: '34px',
  success: 
    background: '#32c682',
    textColor: '#fff',
    childClassName: 'success',
    notiflixIconColor: 'rgba(0,0,0,0.2)',
    fontAwesomeClassName: 'fas fa-check-circle',
    fontAwesomeIconColor: 'rgba(0,0,0,0.2)',
    backOverlayColor: 'rgba(50,198,130,0.2)', // v2.2.0 and the subsequent versions
  ,
  failure: 
    background: '#ff5549',
    textColor: '#fff',
    childClassName: 'failure',
    notiflixIconColor: 'rgba(0,0,0,0.2)',
    fontAwesomeClassName: 'fas fa-times-circle',
    fontAwesomeIconColor: 'rgba(0,0,0,0.2)',
    backOverlayColor: 'rgba(255,85,73,0.2)', // v2.2.0 and the next versions
  ,
  warning: 
    background: '#eebf31',
    textColor: '#fff',
    childClassName: 'warning',
    notiflixIconColor: 'rgba(0,0,0,0.2)',
    fontAwesomeClassName: 'fas fa-exclamation-circle',
    fontAwesomeIconColor: 'rgba(0,0,0,0.2)',
    backOverlayColor: 'rgba(238,191,49,0.2)', // v2.2.0 and the next versions
  ,
  info: 
    background: '#26c0d3',
    textColor: '#fff',
    childClassName: 'info',
    notiflixIconColor: 'rgba(0,0,0,0.2)',
    fontAwesomeClassName: 'fas fa-info-circle',
    fontAwesomeIconColor: 'rgba(0,0,0,0.2)',
    backOverlayColor: 'rgba(38,192,211,0.2)', // v2.2.0 and the next versions
  
});

// or
Notiflix.Notify.Success('Success message');
Notiflix.Notify.Failure('Failure message');
Notiflix.Notify.Warning('Warning message');
Notiflix.Notify.Info('Info message ');
Notiflix.Notify.Success('Success message', function(){
  // Callback 
});

Create an affirmation dialog.

Notiflix.Confirm.Init();

// or
Notiflix.Confirm.Show('Confirm Title','Confirm Message','Ok Button Text');

// with callbacks
Notiflix.Confirm.Show(
  'Confirm Title',
  'Confirm Message',
  'Ok Button Text',
  'Cancel Button Text',
  function()
  // yes callback
  ,
  function(){
  // no
  }
);

Create a report dialog.

Notiflix.Report.Init({
  className: 'notiflix-report',
  width: '320px',
  backgroundColor: '#f8f8f8',
  borderRadius: '25px',
  rtl: false,
  zindex: 4002,
  backOverlay: true,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  fontFamily: 'Quicksand',
  svgSize: '110px',
  plainText: true,
  titleFontSize: '16px',
  titleMaxLength: 34,
  messageFontSize: '13px',
  messageMaxLength: 400,
  buttonFontSize: '14px',
  buttonMaxLength: 34,
  cssAnimation: true,
  cssAnimationDuration: 360,
  cssAnimationStyle: 'fade', // 'fade' - 'zoom'
  success: ,
  failure: 
    svgColor: '#ff5549',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#ff5549',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(255,85,73,0.2)', // v2.2.0 and the next versions
  ,
  warning: 
    svgColor: '#eebf31',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#eebf31',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(238,191,49,0.2)', // v2.2.0 and the next versions
  ,
  info: 
    svgColor: '#26c0d3',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#26c0d3',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(38,192,211,0.2)', // v2.2.0 and the next versions
  ,
});

// or
Notiflix.Report.Success('Title','Success Message','Button Text');
Notiflix.Report.Failure('Title','Failure Message','Button Text');
Notiflix.Report.Warning('Title','Warning Message','Button Text');
Notiflix.Report.Info('Title','Info Message','Button Text');

// with a callback
Notiflix.Report.Success(
  'Success Title',
  'Success Message',
  'Button Text',
function(){
  // callback
});

Create a loading indicator.

Notiflix.Loading.Init(
  className: 'notiflix-loading',
  zindex: 4000,
  backgroundColor: 'rgba(0,0,0,0.8)',
  rtl: false,
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  fontFamily: 'Quicksand',
  cssAnimation: true,
  cssAnimationDuration: 400,
  clickToClose: false,
  customSvgUrl: null,
  svgSize: '80px',
  svgColor: '#32c682',
  messageID: 'NotiflixLoadingMessage',
  messageFontSize: '15px',
  messageMaxLength: 34,
  messageColor: '#dcdcdc',
);

// or
Notiflix.Loading.Standard();
Notiflix.Loading.Hourglass();
Notiflix.Loading.Circle();
Notiflix.Loading.Arrows();
Notiflix.Loading.Dots();
Notiflix.Loading.Pulse();

// with custom loading text
Notiflix.Loading.Standard('Loading...');

// remove
Notiflix.Loading.Remove();

// remove after delay
Notiflix.Loading.Remove(2000);


// use a custom loading spinner
Notiflix.Loading.Init({
  customSvgUrl:'icon.svg', 
  svgSize:'80px'
}); 
Notiflix.Loading.Custom();

Create a block type loading indicator that can be utilized to dam or unblock components.

Notiflix.Block.Init();

// With message
Notiflix.Block.Standard('.block-this-element', 'Loading...');
Notiflix.Block.Hourglass('.my-element', 'Processing...');N
otiflix.Block.Circle('div#Modal', 'Please wait...');

// Without message
messageNotiflix.Block.Arrows('div#PopUp');
Notiflix.Block.Dots('table#MyTable');
Notiflix.Block.Pulse('.report-wrapper');

// Remove
Notiflix.Block.Remove('div#Modal');
Notiflix.Block.Remove('div#Modal', 600);

Global settings.

Notiflix.Notify.Init({
  wrapID: 'NotiflixNotifyWrap', // can not customizable
  width: '280px',
  position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' && v2.2.0 and the next versions => 'center-top' - 'center-bottom' - 'center-center'
  distance: '10px',
  opacity: 1,
  borderRadius: '5px',
  rtl: false,
  timeout: 3000,
  messageMaxLength: 110,
  backOverlay: false,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  plainText: true,
  showOnlyTheLastOne: false,
  clickToClose: false,
  ID: 'NotiflixNotify',
  className: 'notiflix-notify',
  zindex: 4001,
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  fontFamily: 'Quicksand',
  fontSize: '13px',
  cssAnimation: true,
  cssAnimationDuration: 400,
  cssAnimationStyle: 'fade', // 'fade' - 'zoom' - 'from-right' - 'from-top' - 'from-bottom' - 'from-left'
  closeButton: false,
  useIcon: true,
  useFontAwesome: false,
  fontAwesomeIconStyle: 'basic', // 'basic' - 'shadow'
  fontAwesomeIconSize: '34px',
  success: 
    background: '#32c682',
    textColor: '#fff',
    childClassName: 'success',
    notiflixIconColor: 'rgba(0,0,0,0.2)',
    fontAwesomeClassName: 'fas fa-check-circle',
    fontAwesomeIconColor: 'rgba(0,0,0,0.2)',
    backOverlayColor: 'rgba(50,198,130,0.2)', // v2.2.0 and the next versions
  ,
  failure: 
    background: '#ff5549',
    textColor: '#fff',
    childClassName: 'failure',
    notiflixIconColor: 'rgba(0,0,0,0.2)',
    fontAwesomeClassName: 'fas fa-times-circle',
    fontAwesomeIconColor: 'rgba(0,0,0,0.2)',
    backOverlayColor: 'rgba(255,85,73,0.2)', // v2.2.0 and the next versions
  ,
  warning: 
    background: '#eebf31',
    textColor: '#fff',
    childClassName: 'warning',
    notiflixIconColor: 'rgba(0,0,0,0.2)',
    fontAwesomeClassName: 'fas fa-exclamation-circle',
    fontAwesomeIconColor: 'rgba(0,0,0,0.2)',
    backOverlayColor: 'rgba(238,191,49,0.2)', // v2.2.0 and the next versions
  ,
  info: 
    background: '#26c0d3',
    textColor: '#fff',
    childClassName: 'info',
    notiflixIconColor: 'rgba(0,0,0,0.2)',
    fontAwesomeClassName: 'fas fa-info-circle',
    fontAwesomeIconColor: 'rgba(0,0,0,0.2)',
    backOverlayColor: 'rgba(38,192,211,0.2)', // v2.2.0 and the next versions
  ,
});

Notiflix Documentation, Notiflix Plugin/Github

Read More  💳 Make Your Credit Card Form Better In One Line Of Code | Card.js

welcome-to-notiflix-webcodeflow

See Demo And Download

Demo
Download

Official Website(notiflix): Click Here

This superior jQuery/javascript plugin is developed by notiflix. For extra Advanced Usages, please go to the official website.

Published in Javascript, Notification, Popup Plugins and WebCodeFlow

More from JavascriptMore posts in Javascript »
More from NotificationMore posts in Notification »
More from Popup PluginsMore posts in Popup Plugins »
More from WebCodeFlowMore posts in WebCodeFlow »

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *