Sneat Dashboard FREE by ThemeSelection

Notiflix

The Notiflix Block Module allows you to block specific elements or the entire page with a customizable loading screen, enhancing user experience during asynchronous operations. It ensures a clean and visually appealing interface without freezing the browser.
Read the official Notiflix Documentation for a full list of instructions and other options.

Usage

In order to use Notiflix on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/spinkit/spinkit.css" />
<link rel="stylesheet" href="assets/vendor/libs/notiflix/notiflix.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/notiflix/notiflix.js"></script>

Example

Notiflix's usage is very simple; to block user activity for the page or block, all you have to do is initialize it using Class or Id. Refer below mentioned code for more options.You can use any spinner you want, check out spinner options from here.

Notiflix

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam pariatur nisi recusandae dolorem sed, explicabo, aut, inventore obcaecati exercitationem ut qui molestias libero dicta perspiciatis officiis porro ab delectus?

<div class="card">
  <div class="card-header">
    <h5 class="mb-0">Notiflix</h5>
  </div>
  <div class="card-body" id="card-block">
    <p class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam pariatur nisi recusandae
      dolorem sed, explicabo, aut, inventore obcaecati exercitationem ut qui molestias libero dicta
      perspiciatis officiis porro ab delectus?
    </p>
    <div class="notiflix-btn demo-inline-spacing">
      <button class="btn btn-primary btn-card-block">Default</button>
      <button class="btn btn-primary btn-card-block-overlay">Overlay Color</button>
      <button class="btn btn-primary btn-card-block-spinner">Custom Spinner</button>
      <button class="btn btn-primary btn-card-block-custom">Custom Message</button>
      <button class="btn btn-primary btn-card-block-multiple">Multiple Message</button>
      <button class="btn btn-primary remove-card-btn">remove/unblock</button>
    </div>
  </div>
</div>

/* Extended UI - Notiflix */
let section = document.getElementById('section-block'),
  sectionBtn = document.querySelector('.btn-section-block'),
  sectionBtnOverlay = document.querySelector('.btn-section-block-overlay'),
  sectionBtnSpinner = document.querySelector('.btn-section-block-spinner'),
  sectionBtnCustom = document.querySelector('.btn-section-block-custom'),
  sectionBtnMultiple = document.querySelector('.btn-section-block-multiple'),
  sectionId = '#section-block',
  removeBtn = document.querySelector('.remove-btn');

// Default
if (section && sectionBtn) {
  sectionBtn.addEventListener('click', () => {
    Block.circle(sectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '40px',
      svgColor: config.colors.white
    });
  });
}

// Overlay Color
if (section && sectionBtnOverlay) {
  sectionBtnOverlay.addEventListener('click', () => {
    Block.standard(sectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('white-rgb') + ', 0.8)',
      svgSize: '0px'
    });

    let customSpinner = document.createElement('div');
    customSpinner.classList.add('spinner-border', 'text-primary');
    customSpinner.setAttribute('role', 'status');

    let notiflixBlock = document.querySelector('#section-block .notiflix-block');
    notiflixBlock.appendChild(customSpinner);
  });
}

// Custom Spinner
if (section && sectionBtnSpinner) {
  sectionBtnSpinner.addEventListener('click', () => {
    Block.standard(sectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '0px'
    });
    let customSpinnerHTML = `
        <div class="sk-wave mx-auto">
            <div class="sk-rect sk-wave-rect"></div>
            <div class="sk-rect sk-wave-rect"></div>
            <div class="sk-rect sk-wave-rect"></div>
            <div class="sk-rect sk-wave-rect"></div>
            <div class="sk-rect sk-wave-rect"></div>
        </div>
      `;
    let notiflixBlock = document.querySelector('#section-block .notiflix-block');
    notiflixBlock.innerHTML = customSpinnerHTML;
  });
}

// Custom Message
if (section && sectionBtnCustom) {
  sectionBtnCustom.addEventListener('click', () => {
    Block.standard(sectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '0px'
    });
    let customSpinnerHTML = `
        <div class="d-flex">
            <p class="mb-0 text-white">Please wait...</p>
            <div class="sk-wave m-0">
                <div class="sk-rect sk-wave-rect"></div>
                <div class="sk-rect sk-wave-rect"></div>
                <div class="sk-rect sk-wave-rect"></div>
                <div class="sk-rect sk-wave-rect"></div>
                <div class="sk-rect sk-wave-rect"></div>
            </div>
        </div>
      `;
    let notiflixBlock = document.querySelector('#section-block .notiflix-block');
    notiflixBlock.innerHTML = customSpinnerHTML;
  });
}

// Multiple Message
let multiMsg1, multiMsg2, multiMsg3;
if (section && sectionBtnMultiple) {
  sectionBtnMultiple.addEventListener('click', () => {
    // Step 1: Initial block with spinner and "Please wait..." message
    Block.standard(sectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '0px'
    });

    // Inject custom spinner and message
    let initialMessage = `
          <div class="d-flex justify-content-center">
              <p class="mb-0 text-white">Please wait...</p>
              <div class="sk-wave m-0">
                  <div class="sk-rect sk-wave-rect"></div>
                  <div class="sk-rect sk-wave-rect"></div>
                  <div class="sk-rect sk-wave-rect"></div>
                  <div class="sk-rect sk-wave-rect"></div>
                  <div class="sk-rect sk-wave-rect"></div>
              </div>
          </div>
      `;
    let notiflixBlock = document.querySelector('#section-block .notiflix-block');
    if (notiflixBlock) notiflixBlock.innerHTML = initialMessage;

    // remove the first block
    Block.remove(sectionId, 1000);
    // Timeout to start the second block
    multiMsg1 = setTimeout(() => {
      // Step 2: Second block with "Almost Done..." message
      Block.standard(sectionId, 'Almost Done...', {
        backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
        messageFontSize: '15px',
        svgSize: '0px',
        messageColor: config.colors.white
      });

      // remove the second block
      Block.remove(sectionId, 1000);
      // Timeout to start the third block
      multiMsg2 = setTimeout(() => {
        // Step 3: Final block with "Success" message
        Block.standard(sectionId, {
          backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)'
        });

        let initialMessage = `<div class="px-12 py-3 bg-success text-white">Success</div>`;
        let notiflixBlock = document.querySelector('#section-block .notiflix-block');
        if (notiflixBlock) notiflixBlock.innerHTML = initialMessage;

        multiMsg3 = setTimeout(() => {
          Block.remove(sectionId); // Remove the final block
          setTimeout(() => {
            sectionBtn.classList.remove('disabled');
            sectionBtnOverlay.classList.remove('disabled');
            sectionBtnSpinner.classList.remove('disabled');
            sectionBtnCustom.classList.remove('disabled');
            sectionBtnMultiple.classList.remove('disabled');
          }, 500);
        }, 1610); // Adjust the timeout for the final block
      }, 1610); // Adjust the timeout for the second block
    }, 1610); // Adjust the timeout for the first block
  });
}

// List of all button selectors
const buttonSelectors = [
  '.btn-section-block',
  '.btn-section-block-overlay',
  '.btn-section-block-spinner',
  '.btn-section-block-custom',
  '.btn-section-block-multiple'
];

// Select all buttons based on their individual classes
const buttons = buttonSelectors.map(selector => document.querySelector(selector));

// Add click event listener to each button
buttons.forEach(button => {
  if (button) {
    button.addEventListener('click', () => {
      buttons.forEach(btn => {
        if (btn) {
          btn.classList.add('disabled');
        }
      });
    });
  }
});

if (removeBtn) {
  removeBtn.addEventListener('click', () => {
    setTimeout(() => {
      if (document.querySelector(`${sectionId} .notiflix-block`)) {
        Block.remove(sectionId);
      } else {
        alert('No active block to remove.');
      }
    }, 400);
    clearTimeout(multiMsg1);
    clearTimeout(multiMsg2);
    clearTimeout(multiMsg3);
    setTimeout(() => {
      sectionBtn.classList.remove('disabled');
      sectionBtnOverlay.classList.remove('disabled');
      sectionBtnSpinner.classList.remove('disabled');
      sectionBtnCustom.classList.remove('disabled');
      sectionBtnMultiple.classList.remove('disabled');
    }, 500);
  });
}

Notiflix also provides multiple options, you can try them out by clicking on the buttons below.

Notiflix

<div class="card" id="option-block">
  <div class="card-header">
    <h5 class="mb-0">Notiflix</h5>
  </div>
  <div class="card-body">
    <p class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam pariatur nisi recusandae
      dolorem sed, explicabo, aut, inventore obcaecati exercitationem ut qui molestias libero dicta
      perspiciatis officiis porro ab delectus?
    </p>
    <div class="notiflix2-btn demo-inline-spacing">
      <button class="btn btn-primary btn-option-block">Default</button>
      <button class="btn btn-primary btn-option-block-hourglass">Hourglass</button>
      <button class="btn btn-primary btn-option-block-circle">Circle</button>
      <button class="btn btn-primary btn-option-block-arrows">Arrows</button>
      <button class="btn btn-primary btn-option-block-dots">Dots</button>
      <button class="btn btn-primary btn-option-block-pulse">Pulse</button>
      <button class="btn btn-primary remove-option-btn">remove/unblock</button>
    </div>
  </div>
</div>

let optionSection = document.querySelector('#option-block'),
  optionBtn = document.querySelector('.btn-option-block'),
  optionBtnHourglass = document.querySelector('.btn-option-block-hourglass'),
  optionBtnCircle = document.querySelector('.btn-option-block-circle'),
  optionBtnArrows = document.querySelector('.btn-option-block-arrows'),
  optionBtnDots = document.querySelector('.btn-option-block-dots'),
  optionBtnPulse = document.querySelector('.btn-option-block-pulse'),
  optionSectionId = '#option-block',
  removeOptionBtn = document.querySelector('.remove-option-btn');

// Default
if (optionSection && optionBtn) {
  optionBtn.addEventListener('click', () => {
    Block.standard(optionSectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '40px',
      svgColor: config.colors.white
    });
  });
}

// hourglass
if (optionSection && optionBtnHourglass) {
  optionBtnHourglass.addEventListener('click', () => {
    Block.hourglass(optionSectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '40px',
      svgColor: config.colors.white
    });
  });
}

// circle
if (optionSection && optionBtnCircle) {
  optionBtnCircle.addEventListener('click', () => {
    Block.circle(optionSectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '40px',
      svgColor: config.colors.white
    });
  });
}

// arrows
if (optionSection && optionBtnArrows) {
  optionBtnArrows.addEventListener('click', () => {
    Block.arrows(optionSectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '40px',
      svgColor: config.colors.white
    });
  });
}

// Dots
if (optionSection && optionBtnDots) {
  optionBtnDots.addEventListener('click', () => {
    Block.dots(optionSectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '40px',
      svgColor: config.colors.white
    });
  });
}

// Pulse
if (optionSection && optionBtnPulse) {
  optionBtnPulse.addEventListener('click', () => {
    Block.pulse(optionSectionId, {
      backgroundColor: 'rgba(' + window.Helpers.getCssVar('black-rgb') + ', 0.5)',
      svgSize: '40px',
      svgColor: config.colors.white
    });
  });
}

// List of all button selectors
const optionButtonSelectors = [
  '.btn-option-block',
  '.btn-option-block-overlay',
  '.btn-option-block-spinner',
  '.btn-option-block-custom',
  '.btn-option-block-multiple'
];

// Select all buttons based on their individual classes
const optionButtons = optionButtonSelectors.map(selector => document.querySelector(selector));
// Add click event listener to each button
optionButtons.forEach(button => {
  if (button) {
    button.addEventListener('click', () => {
      removeOptionBtn.style.pointerEvents = 'auto';
      removeOptionBtn.style.zIndex = '9999';
    });
  }
});
if (removeOptionBtn) {
  removeOptionBtn.addEventListener('click', () => {
    if (document.querySelector(`${optionSectionId} .notiflix-block`)) {
      Block.remove(optionSectionId);
    } else {
      alert('No active block to remove.');
    }
  });
}