A simple 39 line of code, yet powerful plug-in written in pure Javascript to display a waiting page that prevents the user from interacting with all or part of the page while a background process or processes are executing.

You can change everything, started with the loader gif, background color, text color and the message. This applies to all or part of a page. So, you can use it in any project, even if it's a simple static html page.

npm install block-ui.js

yarn add block-ui.js

<script src="https://unpkg.com/block-ui.js"></script>

import 'block-ui.js';

document.vzool_blockui_image = 'https://i.imgur.com/3g7OaQx.gif'; // or local file like loader.gif
document.vzool_blockui_background = '#121111'; // optional
document.vzool_blockui_color = '#ffffff'; // optional

There should be an element with id identifier in the page to block it with loader gif and background color set in document.vzool_blockui_background and document.vzool_blockui_color variables above.

BlockUI("container").show(); // not #container

BlockUI("container").blocked(); // true or false

BlockUI("container").message("<h1 style='padding-top: 190px;'>Loading...</h1>"); // set message
BlockUI("container").message(); // clear the message

You can use padding-top or padding-bottom to move the message up or down accordingly, so it is HTML content, you can update with anything which is HTML valid.

• Note: it should be initialized with calling show() method first, otherwise it will not work and just return false.

BlockUI("container").hide();

For more information, please read the source code.

• https://onezeronull.com/2013/03/25/simple-element-blocker-with-and-without-jquery
• https://www.pinterest.com/pin/224828206383260450
• https://www.iconfinder.com/icons/8674984/ic_fluent_eye_tracking_off_regular_icon
• https://smashinghub.com/10-cool-loading-animated-gif.htm

ISC License