- Add Logo.

- Enhance docs and examples.

README.ar.md

@@ -1,15 +1,26 @@
 <div dir="rtl">
 
+<div style="text-align: center;">
+
+![شعار المكتبة](images/logo.png)
 # block-ui.js
 
 <p>
 <a href="https://github.com/vzool/block-ui.js/blob/main/README.md"><img src="https://img.shields.io/badge/lang-en-green.svg" alt="en" data-canonical-src="https://img.shields.io/badge/lang-en-green.svg" style="max-width: 100%;"></a>
 <a href="https://npmjs.org/package/block-ui.js" title="View this project on NPM"><img src="https://img.shields.io/npm/v/block-ui.js.svg" alt="NPM رقم الاصدارة في مدير حزم مكتبات" /></a>
 </p>
+</div>
+
 
-مكون إضافي بسيط ولكنه قوي بالجافا سكريبت خالص وذلك لعرض صفحة انتظار تمنع المستخدم من التفاعل مع الصفحة أثناء تنفيذ إجراءات متعددة في الخلفية.
+مكون إضافي بسيط مكون من 39 سطر برمجي فقط، ولكنه قوي مبرمج بلغة الجافا سكريبت (Javascript) خالص وذلك لعرض صفحة انتظار تمنع المستخدم من التفاعل مع الصفحة بالكامل أو جزء منها أثناء تنفيذ عملية أو عدت عمليات في الخلفية.
+![لقطة شاشة](images/screenshot.gif)
 
-![لقطة شاشة](screenshot.gif)
+يمكنك تغيير كل شيء، بدءًا من ملف `gif` المحمل ولون الخلفية ولون النص والرسالة، هذا ينطبق على كل أو جزء من الصفحة.
+لذلك، يمكنك استخدامه في أي مشروع، حتى لو كانت صفحة `HTML` ثابتة بسيطة.
+
+###### الأمثلة (Examples) https://vzool.github.io/block-ui.js
+
+<div dir="rtl">
 
 ## التثبيت (Installation)
 
@@ -86,9 +97,30 @@ BlockUI("container").hide();
 
 <div dir="rtl">
 
-### المرجع (Reference)
+### الوثائق البرمجية (API Documentation)
+</div>
+
+الاسم (Name) | النوع (Type) | الخيارات (Parameter) | الافتراضي (Default) | الوصف (Description)
+--- | --- | --- | --- | ---
+`BlockUI()` | الباني (constructor) | `id` | - | يقوم بإنشاء مقترح (instance) من الكائن
+`show()` | طريقة مقترحة (method) | - | - | تعرض واجهة حجب الصفحة
+`hide()` | طريقة مقترحة (method) | - | - | تخفي واجهة حجب الصفحة
+`blocked()` | طريقة مقترحة (method) | - | - | تحقق من حالة حجب الصفحة
+`message()` | طريقة مقترحة (method) | `message` | - | تحديث رسائل حجب الصفحة
+`document.vzool_blockui_image` | متغير (variable) | - | `loader.gif` | تحديد ملف `gif` للمحمل
+`document.vzool_blockui_background` | متغير (variable) | - | `#121111` | تحديد لون الخلفية
+`document.vzool_blockui_color` | متغير (variable) | - | `#ffffff` | تحديد لون النص
+
+للمزيد من المعلومات، يرجى قراءة البرمجة المصدرية (source code).
+
+<div dir="rtl">
+
+### المراجع (References)
 
-https://onezeronull.com/2013/03/25/simple-element-blocker-with-and-without-jquery/#comment-842
+- 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
 
 ### الترخيص (License)
 

README.md

@@ -1,13 +1,24 @@
+
+<div style="text-align: center;">
+
+![Library Logo](images/logo.png)
 # block-ui.js
 
 <p>
 <a href="https://github.com/vzool/block-ui.js/blob/main/README.ar.md"><img src="https://img.shields.io/badge/lang-ar-green.svg" alt="ar" data-canonical-src="https://img.shields.io/badge/lang-en-green.svg" style="max-width: 100%;"></a>
 <a href="https://npmjs.org/package/block-ui.js" title="View this project on NPM"><img src="https://img.shields.io/npm/v/block-ui.js.svg" alt="NPM version" /></a>
 </p>
+</div>
+
+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.
+
+![Screenshot](images/screenshot.gif)
 
-A simple but powerful vanilla pure javascript plugin to block user interaction with a page while an action is being performed in the background.
+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.
 
-![Screenshot](screenshot.gif)
+###### Examples https://vzool.github.io/block-ui.js
 
 ## Installation
 
@@ -77,9 +88,27 @@ You can use `padding-top` or `padding-bottom` to move the message up or down acc
 BlockUI("container").hide();
 ```
 
-### Reference
+### API Documentation
+
+Name | Type | Parameter | Default | Description
+--- | --- | --- | --- | ---
+`BlockUI()` | constructor | `id` | - | Create a new instance
+`show()` | method | - | - | Show the block UI
+`hide()` | method | - | - | Hide the block UI
+`blocked()` | method | - | - | Check if the block UI is shown
+`message()` | method | `message` | - | Set or clear the message
+`document.vzool_blockui_image` | variable | - | `loader.gif` | Set or clear the image
+`document.vzool_blockui_background` | variable | - | `#121111` | Set or clear the background
+`document.vzool_blockui_color` | variable | - | `#ffffff` | Set or clear the color
+
+For more information, please read the source code.
+
+### References
 
-https://onezeronull.com/2013/03/25/simple-element-blocker-with-and-without-jquery/#comment-842
+- 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
 
 ### License
 

index.html

@@ -11,10 +11,14 @@
         <h1>block-ui.js (Example)</h1>
         <button id="btn">Block Me (for 3 seconds)</button>
         <button id="btn2">Block Me (with messages)</button>
+        <button id="btn3">Block Me (without gif)</button>
+        <button id="btn4">Block Me (External gif)</button>
     </div>
     <script defer>
         const btn = document.getElementById('btn');
         btn.addEventListener('click', () => {
+            document.vzool_blockui_image = 'images/loader.gif';
+            document.vzool_blockui_background = '#121111';
             console.log(BlockUI("container").show());
             setTimeout(() => {
                 console.log(BlockUI("container").hide());
@@ -23,6 +27,8 @@ <h1>block-ui.js (Example)</h1>
 
         const btn2 = document.getElementById('btn2');
         btn2.addEventListener('click', async () => {
+            document.vzool_blockui_image = 'images/loader.gif';
+            document.vzool_blockui_background = '#121111';
             console.log(BlockUI("container").show());
             console.log(BlockUI("container").message("<h1 style='padding-top: 190px;'>Loading...</h1>"));
             await delay(1500);
@@ -35,6 +41,32 @@ <h1>block-ui.js (Example)</h1>
             await delay(1500);
             console.log(BlockUI("container").hide());
         });
+
+        const btn3 = document.getElementById('btn3');
+        btn3.addEventListener('click', async () => {
+            document.vzool_blockui_image = '';
+            console.log(BlockUI("container").show());
+            console.log(BlockUI("container").message("<h1>Loading...</h1>"));
+            await delay(1500);
+            for(var i = 0; i < 101; i++) {
+                console.log(BlockUI("container").message(`<h1>${i}%</h1>`));
+                await delay(100);
+            }
+            await delay(1500);
+            console.log(BlockUI("container").message("<h1>Done</h1>"));
+            await delay(1500);
+            console.log(BlockUI("container").hide());
+        });
+
+        const btn4 = document.getElementById('btn4');
+        btn4.addEventListener('click', () => {
+            document.vzool_blockui_image = 'https://raw.githubusercontent.com/vzool/block-ui.js/main/images/cool-loading-animated-gif-1.gif';
+            document.vzool_blockui_background = '#66CEFF';
+            console.log(BlockUI("container").show());
+            setTimeout(() => {
+                console.log(BlockUI("container").hide());
+            }, 3000);
+        });
 
         function delay(time) { return new Promise(resolve => setTimeout(resolve, time)); }
     </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "block-ui.js",
-  "version": "0.0.2",
+  "version": "0.0.21",
   "description": "Library to block UI elements with loading image",
   "main": "block-ui.js",
   "scripts": {