Block

Notiflix Block module can be used to block/unblock the elements during a process (Fetch/XHR), without locking the browser or the other elements/components to prevent the user’s interactions on the blocked elements.

(A) Import as a Module

import { Block } from 'notiflix/build/notiflix-block-aio';

(B) Add to an HTML page (Global)

(B1) Block Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-block-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>

Playground

Block

Block the element(s).

All Options

@param1 {string | Array<HTMLElement> | NodeListOf<HTMLElement>}:  Required, CSS selector(s) that matches the element(s) | Array of HTMLElments | NodeListOf HTMLElments to block.@param2 {string | Object}: Optional, a blocking message in string format. Or, extending the initialize options with the new options for each block element.@param3 {Object}: Optional, extending the initialize options with new the options for each block element. (If the second parameter has been already used for a blocking message.)Only indicatorsBlock.standard('.js-element');Block.hourglass('.js-element');Block.circle('.js-element');Block.arrows('.js-element');Block.dots('.js-element');Block.pulse('.js-element');Indicator with a blocking messageBlock.standard('.js-element', 'Please wait...');Only indicator with the new optionsBlock.standard('.js-element', {cssAnimationDuration: 1881,svgSize: '19px',});Indicator with a blocking message, and the new optionsBlock.standard('.js-element', 'Please wait...', {backgroundColor: 'rgba(0,0,0,0.8)',});

Unblock

Unblock the element(s) if already has been blocked.

@param1 {string | Array<HTMLElement> | NodeListOf<HTMLElement>}: Required, CSS selector(s) that matches the element(s) | Array of HTMLElments | NodeListOf HTMLElments to unblock.@param2 {number}: Optional, milliseconds for delaying in number format.Unblock immediatelyBlock.remove('.js-element');Unblock after delay => e.g. 1923msBlock.remove('.js-element', 1923);

Demo

A blocking indicator type can be chosen for the demonstration.

.js-element

5 minutes for the next 50 years of your life

...

Prioritize who you are, who you want to be and don’t spend time with anything that antagonizes your character.

Be brave, take the hill, but first answer that question: What’s my hill?

So first we have to define success for ourselves. And then we have to put in the work to maintain it. Make that daily tally. Tend to our garden. Keep the things that are important to us in good shape.

...