From 17903a8cf1e5dc5073ae5e9da6e525506eb66e35 Mon Sep 17 00:00:00 2001
From: "awe.media" <github@awe.media>
Date: Tue, 25 Jan 2022 15:20:31 +1100
Subject: [PATCH] General fixes to the example custom loaders.

---
 loaders/12_one_color_examples/README.md       | 914 +++++++++---------
 loaders/12_one_color_examples/loader.css      |  25 +-
 loaders/12_one_color_examples/loader.html     | 126 +--
 loaders/3d_cube_scale/README.md               |   3 +-
 loaders/3d_cube_scale/loader.css              |   3 +-
 loaders/3d_cube_spinner/README.md             |   4 +-
 loaders/3d_cube_spinner/loader.css            |   4 +-
 loaders/3d_falling_rings/README.md            |  22 +-
 loaders/3d_falling_rings/loader.css           |  20 +-
 loaders/3d_flying_ball/README.md              |  19 +-
 loaders/3d_flying_ball/loader.css             |  17 +-
 loaders/3d_graphic_going_up/README.md         |   2 +-
 loaders/3d_rotating_color_bars/README.md      | 270 +++---
 loaders/3d_rotating_color_bars/loader.css     | 270 +++---
 loaders/4_plates_spinner/README.md            |   2 +-
 loaders/climbing_box/README.md                |   3 +-
 loaders/climbing_box/loader.css               |   3 +-
 loaders/disappearing_falling_cube/README.md   |   5 +
 loaders/disappearing_falling_cube/loader.css  |   5 +
 loaders/flipping_paper_rhombus/README.md      |   9 +-
 loaders/flipping_paper_rhombus/loader.css     |   7 +-
 loaders/flying_panel/README.md                |   4 +-
 loaders/flying_panel/loader.css               |   4 +-
 loaders/moving_truck/README.md                |   3 +-
 loaders/moving_truck/loader.css               |   3 +-
 loaders/rainbow_welcome/README.md             |  30 +-
 loaders/rainbow_welcome/loader.js             |  14 +-
 loaders/rotating_3d_cube/README.md            |   3 +-
 loaders/rotating_3d_cube/loader.css           |   3 +-
 .../rotating_3d_cube_with_shadow/README.md    |   3 +-
 .../rotating_3d_cube_with_shadow/loader.css   |   3 +-
 loaders/rotating_balls/README.md              |   3 +-
 loaders/rotating_balls/loader.css             |   3 +-
 loaders/rotating_planet/README.md             |   3 +-
 loaders/rotating_planet/loader.css            |   3 +-
 loaders/spinning_circles/README.md            |   2 +-
 loaders/spinning_circles/loader.css           |   3 +-
 loaders/waving_stripes/README.md              |   7 +-
 loaders/waving_stripes/loader.css             |   5 +
 loaders/wobbling_circle/README.md             |   3 +-
 loaders/wobbling_circle/loader.css            |   3 +-
 41 files changed, 1000 insertions(+), 838 deletions(-)

diff --git a/loaders/12_one_color_examples/README.md b/loaders/12_one_color_examples/README.md
index df9fb5c..f024048 100644
--- a/loaders/12_one_color_examples/README.md
+++ b/loaders/12_one_color_examples/README.md
@@ -32,65 +32,69 @@ Copy below **HTML** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 <div id="basic_loaders_holder" class="basic_loader_wrapper visible_loader"> <!-- main wrapper -->
 
-<!-- here you can pick different basic loaders -->
+  <div class="single_loader_holder">
 
-<!-- circle flips like a coin -->
-<div class="lds-circle"><div></div></div>
-<!-- circle flips like a coin -->
+    <!-- here you can pick different basic loaders -->
 
-<!-- start of heart beating -->
-<div class="lds-heart"><div></div></div>
-<!-- end of heart beating -->
+    <!-- circle flips like a coin -->
+    <div class="lds-circle"><div></div></div>
+    <!-- circle flips like a coin -->
 
-<!-- start of loading roller -->
-<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<!-- end of loading roller -->
+    <!-- start of heart beating -->
+    <div class="lds-heart"><div></div></div>
+    <!-- end of heart beating -->
 
+    <!-- start of loading roller -->
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <!-- end of loading roller -->
 
-<!-- start of 3 dots moving -->
-<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-<!-- end of 3 dots moving -->
 
-<br> <!-- separation for example purposes -->
+    <!-- start of 3 dots moving -->
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+    <!-- end of 3 dots moving -->
 
-<!-- start of hour glass spinning -->
-<div class="lds-hourglass"></div>
-<!-- end of hour glass spinning -->
+    <br> <!-- separation for example purposes -->
 
-<!-- start circular waves -->
-<div class="lds-ripple"><div></div><div></div></div>
-<!-- end circular waves -->
+    <!-- start of hour glass spinning -->
+    <div class="lds-hourglass"></div>
+    <!-- end of hour glass spinning -->
 
+    <!-- start circular waves -->
+    <div class="lds-ripple"><div></div><div></div></div>
+    <!-- end circular waves -->
 
 
 
-<!-- start of classic loading circle (spinning) -->
-<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<!-- end of classic loading circle (spinning) -->
 
-<!-- start of 6 dots loader -->
-<div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<!-- end of 6 dots loader -->
+    <!-- start of classic loading circle (spinning) -->
+    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <!-- end of classic loading circle (spinning) -->
 
-<br> <!-- separation for example purposes -->
+    <!-- start of 6 dots loader -->
+    <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <!-- end of 6 dots loader -->
 
-<!-- start of continuous spinning circle -->
-<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
-<!-- end of continuous spinning circle -->
+    <br> <!-- separation for example purposes -->
 
-<!-- start of dual spinning circle -->
-<div class="lds-dual-ring"></div>
-<!-- end of dual spinning circle -->
+    <!-- start of continuous spinning circle -->
+    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+    <!-- end of continuous spinning circle -->
 
-<!-- start of default dot circle -->
-<div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<!-- end of default dot circle -->
+    <!-- start of dual spinning circle -->
+    <div class="lds-dual-ring"></div>
+    <!-- end of dual spinning circle -->
 
-<!-- start of 3squares animation -->
-<div class="lds-3squares"><div></div><div></div><div></div></div>
-<!-- end of 3squares animation -->
+    <!-- start of default dot circle -->
+    <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <!-- end of default dot circle -->
 
-<!-- end of picking different basic loaders -->
+    <!-- start of 3squares animation -->
+    <div class="lds-3squares"><div></div><div></div><div></div></div>
+    <!-- end of 3squares animation -->
+
+    <!-- end of picking different basic loaders -->
+
+  </div> <!-- end of single loader holder -->
 
 <div> <!-- end of loader wrapper -->
 
@@ -108,56 +112,67 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 ** or, if you require a completely different custom loader,
 ** you can always contact us at support@awe.media
 */
-  :root{
-    --main_animated_figure_color: #fa6602; /* <-- you can change the main figure color here */
-    --loader_main_background_color: #565656; /* <-- you can change the page background color here */
-  }
+:root{
+  --main_animated_figure_color: #fa6602; /* <-- you can change the main figure color here */
+  --loader_main_background_color: #565656; /* <-- you can change the page background color here */
+}
 /* .... end of css global vars ....*/
 
 /* general css (wrapper) */
 .basic_loader_wrapper.visible_loader{
+  display: block;
+}
+.single_loader_holder{
+  min-width:100vw;
+  min-height: 100vh;
+  text-align: center;
+  vertical-align: middle;
   display: table-cell;
+  height:100vh;
 }
 .basic_loader_wrapper{
   display: none;
-  width: 100vw;
-  height:100vh;
+  min-width: 100vw;
+  min-height:100vh;
   background-color: var(--loader_main_background_color);
-  text-align: center;
-  vertical-align: middle;
+  position:fixed;
+  top:0;
+  left:0;
+  bottom:0;
+  right: 0;
 }
 /* end of general css */
 
 /* ----------------------------------- */
 /* start of circle flips like a coin */
 .lds-circle {
-  display: inline-block;
-  transform: translateZ(1px);
+display: inline-block;
+transform: translateZ(1px);
 }
 .lds-circle > div {
-  display: inline-block;
-  width: 64px; /* <-- you can change the circle width  here */
-  height: 64px; /* <-- you can change the circle height  here */
-  margin: 8px;
-  border-radius: 50%;
-  background: var(--main_animated_figure_color);
-  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;  /* <-- you can change the circle's speed here by decreasing the duration (or slower it by increasing 
-  duration) */
+display: inline-block;
+width: 64px; /* <-- you can change the circle width  here */
+height: 64px; /* <-- you can change the circle height  here */
+margin: 8px;
+border-radius: 50%;
+background: var(--main_animated_figure_color);
+animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;  /* <-- you can change the circle's speed here by decreasing the duration (or slower it by increasing 
+duration) */
 }
 @keyframes lds-circle {
-  0%, 100% {
-    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
-  }
-  0% {
-    transform: rotateY(0deg);
-  }
-  50% {
-    transform: rotateY(1800deg);
-    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
-  }
-  100% {
-    transform: rotateY(3600deg);
-  }
+0%, 100% {
+  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+}
+0% {
+  transform: rotateY(0deg);
+}
+50% {
+  transform: rotateY(1800deg);
+  animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+}
+100% {
+  transform: rotateY(3600deg);
+}
 }
 
 /* end of circle flips like a coin */
@@ -169,58 +184,58 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* start of heart beating */
 
 .lds-heart {
-  display: inline-block;
-  position: relative;
-  width: 80px; 
-  height: 80px;
-  transform: rotate(45deg);
-  transform-origin: 40px 40px; 
+display: inline-block;
+position: relative;
+width: 80px; 
+height: 80px;
+transform: rotate(45deg);
+transform-origin: 40px 40px; 
 }
 .lds-heart div {
-  top: 32px;
-  left: 32px;
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  background: var(--main_animated_figure_color);
-  animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); /* <-- you can change the heart beating duration  here */
+top: 32px;
+left: 32px;
+position: absolute;
+width: 32px;
+height: 32px;
+background: var(--main_animated_figure_color);
+animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); /* <-- you can change the heart beating duration  here */
 }
 .lds-heart div:after,
 .lds-heart div:before {
-  content: " ";
-  position: absolute;
-  display: block;
-  width: 32px; 
-  height: 32px;
-  background: var(--main_animated_figure_color);
+content: " ";
+position: absolute;
+display: block;
+width: 32px; 
+height: 32px;
+background: var(--main_animated_figure_color);
 }
 .lds-heart div:before {
-  left: -24px;
-  border-radius: 50% 0 0 50%;
+left: -24px;
+border-radius: 50% 0 0 50%;
 }
 .lds-heart div:after {
-  top: -24px;
-  border-radius: 50% 50% 0 0;
+top: -24px;
+border-radius: 50% 50% 0 0;
 }
 @keyframes lds-heart {
-  0% {
-    transform: scale(0.95);
-  }
-  5% {
-    transform: scale(1.1);
-  }
-  39% {
-    transform: scale(0.85);
-  }
-  45% {
-    transform: scale(1);
-  }
-  60% {
-    transform: scale(0.95);
-  }
-  100% {
-    transform: scale(0.9);
-  }
+0% {
+  transform: scale(0.95);
+}
+5% {
+  transform: scale(1.1);
+}
+39% {
+  transform: scale(0.85);
+}
+45% {
+  transform: scale(1);
+}
+60% {
+  transform: scale(0.95);
+}
+100% {
+  transform: scale(0.9);
+}
 }
 
 /* end of heart beating */
@@ -231,88 +246,88 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* ----------------------------------- */
 /* start of loading roller */
 .lds-roller {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-roller div {
-  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  transform-origin: 40px 40px;
+animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+transform-origin: 40px 40px;
 }
 .lds-roller div:after {
-  content: " ";
-  display: block;
-  position: absolute;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--main_animated_figure_color);
-  margin: -4px 0 0 -4px;
+content: " ";
+display: block;
+position: absolute;
+width: 7px;
+height: 7px;
+border-radius: 50%;
+background: var(--main_animated_figure_color);
+margin: -4px 0 0 -4px;
 }
 .lds-roller div:nth-child(1) {
-  animation-delay: -0.036s;
+animation-delay: -0.036s;
 }
 .lds-roller div:nth-child(1):after {
-  top: 63px;
-  left: 63px;
+top: 63px;
+left: 63px;
 }
 .lds-roller div:nth-child(2) {
-  animation-delay: -0.072s;
+animation-delay: -0.072s;
 }
 .lds-roller div:nth-child(2):after {
-  top: 68px;
-  left: 56px;
+top: 68px;
+left: 56px;
 }
 .lds-roller div:nth-child(3) {
-  animation-delay: -0.108s;
+animation-delay: -0.108s;
 }
 .lds-roller div:nth-child(3):after {
-  top: 71px;
-  left: 48px;
+top: 71px;
+left: 48px;
 }
 .lds-roller div:nth-child(4) {
-  animation-delay: -0.144s;
+animation-delay: -0.144s;
 }
 .lds-roller div:nth-child(4):after {
-  top: 72px;
-  left: 40px;
+top: 72px;
+left: 40px;
 }
 .lds-roller div:nth-child(5) {
-  animation-delay: -0.18s;
+animation-delay: -0.18s;
 }
 .lds-roller div:nth-child(5):after {
-  top: 71px;
-  left: 32px;
+top: 71px;
+left: 32px;
 }
 .lds-roller div:nth-child(6) {
-  animation-delay: -0.216s;
+animation-delay: -0.216s;
 }
 .lds-roller div:nth-child(6):after {
-  top: 68px;
-  left: 24px;
+top: 68px;
+left: 24px;
 }
 .lds-roller div:nth-child(7) {
-  animation-delay: -0.252s;
+animation-delay: -0.252s;
 }
 .lds-roller div:nth-child(7):after {
-  top: 63px;
-  left: 17px;
+top: 63px;
+left: 17px;
 }
 .lds-roller div:nth-child(8) {
-  animation-delay: -0.288s;
+animation-delay: -0.288s;
 }
 .lds-roller div:nth-child(8):after {
-  top: 56px;
-  left: 12px;
+top: 56px;
+left: 12px;
 }
 @keyframes lds-roller {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+0% {
+  transform: rotate(0deg);
+}
+100% {
+  transform: rotate(360deg);
+}
 }
 
 /* end of loading roller */
@@ -322,59 +337,59 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* ----------------------------------- */
 /* start of 3 dots moving*/
 .lds-ellipsis {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-ellipsis div {
-  position: absolute;
-  top: 33px;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  background: var(--main_animated_figure_color);
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+position: absolute;
+top: 33px;
+width: 13px;
+height: 13px;
+border-radius: 50%;
+background: var(--main_animated_figure_color);
+animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 .lds-ellipsis div:nth-child(1) {
-  left: 8px;
-  animation: lds-ellipsis1 0.6s infinite;
+left: 8px;
+animation: lds-ellipsis1 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(2) {
-  left: 8px;
-  animation: lds-ellipsis2 0.6s infinite;
+left: 8px;
+animation: lds-ellipsis2 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(3) {
-  left: 32px;
-  animation: lds-ellipsis2 0.6s infinite;
+left: 32px;
+animation: lds-ellipsis2 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(4) {
-  left: 56px;
-  animation: lds-ellipsis3 0.6s infinite;
+left: 56px;
+animation: lds-ellipsis3 0.6s infinite;
 }
 @keyframes lds-ellipsis1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
+0% {
+  transform: scale(0);
+}
+100% {
+  transform: scale(1);
+}
 }
 @keyframes lds-ellipsis3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
+0% {
+  transform: scale(1);
+}
+100% {
+  transform: scale(0);
+}
 }
 @keyframes lds-ellipsis2 {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(24px, 0);
-  }
+0% {
+  transform: translate(0, 0);
+}
+100% {
+  transform: translate(24px, 0);
+}
 }
 /* end of 3 dots moving*/
 /* ----------------------------------- */
@@ -385,35 +400,35 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* start of hour glass spinning*/
 
 .lds-hourglass {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-hourglass:after {
-  content: " ";
-  display: block;
-  border-radius: 50%;
-  width: 0;
-  height: 0;
-  margin: 8px;
-  box-sizing: border-box;
-  border: 32px solid var(--main_animated_figure_color);
-  border-color: var(--main_animated_figure_color) transparent var(--main_animated_figure_color) transparent;
-  animation: lds-hourglass 1.2s infinite;
+content: " ";
+display: block;
+border-radius: 50%;
+width: 0;
+height: 0;
+margin: 8px;
+box-sizing: border-box;
+border: 32px solid var(--main_animated_figure_color);
+border-color: var(--main_animated_figure_color) transparent var(--main_animated_figure_color) transparent;
+animation: lds-hourglass 1.2s infinite;
 }
 @keyframes lds-hourglass {
-  0% {
-    transform: rotate(0);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  50% {
-    transform: rotate(900deg);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  100% {
-    transform: rotate(1800deg);
-  }
+0% {
+  transform: rotate(0);
+  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+50% {
+  transform: rotate(900deg);
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+100% {
+  transform: rotate(1800deg);
+}
 }
 
 /* end of hour glass spinning*/
@@ -426,36 +441,36 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* start of circular waves*/
 
 .lds-ripple {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-ripple div {
-  position: absolute;
-  border: 4px solid var(--main_animated_figure_color);
-  opacity: 1;
-  border-radius: 50%;
-  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+position: absolute;
+border: 4px solid var(--main_animated_figure_color);
+opacity: 1;
+border-radius: 50%;
+animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }
 .lds-ripple div:nth-child(2) {
-  animation-delay: -0.5s;
+animation-delay: -0.5s;
 }
 @keyframes lds-ripple {
-  0% {
-    top: 36px;
-    left: 36px;
-    width: 0;
-    height: 0;
-    opacity: 1;
-  }
-  100% {
-    top: 0px;
-    left: 0px;
-    width: 72px;
-    height: 72px;
-    opacity: 0;
-  }
+0% {
+  top: 36px;
+  left: 36px;
+  width: 0;
+  height: 0;
+  opacity: 1;
+}
+100% {
+  top: 0px;
+  left: 0px;
+  width: 72px;
+  height: 72px;
+  opacity: 0;
+}
 }
 /* end of circular waves*/
 /* ----------------------------------- */
@@ -467,82 +482,82 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* start of classic loading circle (spinning)*/
 
 .lds-spinner {
-  color: official;
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+color: official;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-spinner div {
-  transform-origin: 40px 40px;
-  animation: lds-spinner 1.2s linear infinite;
+transform-origin: 40px 40px;
+animation: lds-spinner 1.2s linear infinite;
 }
 .lds-spinner div:after {
-  content: " ";
-  display: block;
-  position: absolute;
-  top: 3px;
-  left: 37px;
-  width: 6px;
-  height: 18px;
-  border-radius: 20%;
-  background: var(--main_animated_figure_color);
+content: " ";
+display: block;
+position: absolute;
+top: 3px;
+left: 37px;
+width: 6px;
+height: 18px;
+border-radius: 20%;
+background: var(--main_animated_figure_color);
 }
 .lds-spinner div:nth-child(1) {
-  transform: rotate(0deg);
-  animation-delay: -1.1s;
+transform: rotate(0deg);
+animation-delay: -1.1s;
 }
 .lds-spinner div:nth-child(2) {
-  transform: rotate(30deg);
-  animation-delay: -1s;
+transform: rotate(30deg);
+animation-delay: -1s;
 }
 .lds-spinner div:nth-child(3) {
-  transform: rotate(60deg);
-  animation-delay: -0.9s;
+transform: rotate(60deg);
+animation-delay: -0.9s;
 }
 .lds-spinner div:nth-child(4) {
-  transform: rotate(90deg);
-  animation-delay: -0.8s;
+transform: rotate(90deg);
+animation-delay: -0.8s;
 }
 .lds-spinner div:nth-child(5) {
-  transform: rotate(120deg);
-  animation-delay: -0.7s;
+transform: rotate(120deg);
+animation-delay: -0.7s;
 }
 .lds-spinner div:nth-child(6) {
-  transform: rotate(150deg);
-  animation-delay: -0.6s;
+transform: rotate(150deg);
+animation-delay: -0.6s;
 }
 .lds-spinner div:nth-child(7) {
-  transform: rotate(180deg);
-  animation-delay: -0.5s;
+transform: rotate(180deg);
+animation-delay: -0.5s;
 }
 .lds-spinner div:nth-child(8) {
-  transform: rotate(210deg);
-  animation-delay: -0.4s;
+transform: rotate(210deg);
+animation-delay: -0.4s;
 }
 .lds-spinner div:nth-child(9) {
-  transform: rotate(240deg);
-  animation-delay: -0.3s;
+transform: rotate(240deg);
+animation-delay: -0.3s;
 }
 .lds-spinner div:nth-child(10) {
-  transform: rotate(270deg);
-  animation-delay: -0.2s;
+transform: rotate(270deg);
+animation-delay: -0.2s;
 }
 .lds-spinner div:nth-child(11) {
-  transform: rotate(300deg);
-  animation-delay: -0.1s;
+transform: rotate(300deg);
+animation-delay: -0.1s;
 }
 .lds-spinner div:nth-child(12) {
-  transform: rotate(330deg);
-  animation-delay: 0s;
+transform: rotate(330deg);
+animation-delay: 0s;
 }
 @keyframes lds-spinner {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
+0% {
+  opacity: 1;
+}
+100% {
+  opacity: 0;
+}
 }
 
 /* end of classic loading circle (spinning)*/
@@ -554,71 +569,71 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* ----------------------------------- */
 /* start of 6 dots loader*/
 .lds-grid {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-grid div {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--main_animated_figure_color);
-  animation: lds-grid 1.2s linear infinite;
+position: absolute;
+width: 16px;
+height: 16px;
+border-radius: 50%;
+background: var(--main_animated_figure_color);
+animation: lds-grid 1.2s linear infinite;
 }
 .lds-grid div:nth-child(1) {
-  top: 8px;
-  left: 8px;
-  animation-delay: 0s;
+top: 8px;
+left: 8px;
+animation-delay: 0s;
 }
 .lds-grid div:nth-child(2) {
-  top: 8px;
-  left: 32px;
-  animation-delay: -0.4s;
+top: 8px;
+left: 32px;
+animation-delay: -0.4s;
 }
 .lds-grid div:nth-child(3) {
-  top: 8px;
-  left: 56px;
-  animation-delay: -0.8s;
+top: 8px;
+left: 56px;
+animation-delay: -0.8s;
 }
 .lds-grid div:nth-child(4) {
-  top: 32px;
-  left: 8px;
-  animation-delay: -0.4s;
+top: 32px;
+left: 8px;
+animation-delay: -0.4s;
 }
 .lds-grid div:nth-child(5) {
-  top: 32px;
-  left: 32px;
-  animation-delay: -0.8s;
+top: 32px;
+left: 32px;
+animation-delay: -0.8s;
 }
 .lds-grid div:nth-child(6) {
-  top: 32px;
-  left: 56px;
-  animation-delay: -1.2s;
+top: 32px;
+left: 56px;
+animation-delay: -1.2s;
 }
 .lds-grid div:nth-child(7) {
-  top: 56px;
-  left: 8px;
-  animation-delay: -0.8s;
+top: 56px;
+left: 8px;
+animation-delay: -0.8s;
 }
 .lds-grid div:nth-child(8) {
-  top: 56px;
-  left: 32px;
-  animation-delay: -1.2s;
+top: 56px;
+left: 32px;
+animation-delay: -1.2s;
 }
 .lds-grid div:nth-child(9) {
-  top: 56px;
-  left: 56px;
-  animation-delay: -1.6s;
+top: 56px;
+left: 56px;
+animation-delay: -1.6s;
 }
 @keyframes lds-grid {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+0%, 100% {
+  opacity: 1;
+}
+50% {
+  opacity: 0.5;
+}
 }
 
 /* end of 6 dots loader*/
@@ -631,39 +646,39 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* ----------------------------------- */
 /* start of continuous spinning circle*/
 .lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  margin: 8px;
-  border: 8px solid var(--main_animated_figure_color);
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: var(--main_animated_figure_color) transparent transparent transparent;
+box-sizing: border-box;
+display: block;
+position: absolute;
+width: 64px;
+height: 64px;
+margin: 8px;
+border: 8px solid var(--main_animated_figure_color);
+border-radius: 50%;
+animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+border-color: var(--main_animated_figure_color) transparent transparent transparent;
 }
 .lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
+animation-delay: -0.45s;
 }
 .lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
+animation-delay: -0.3s;
 }
 .lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
+animation-delay: -0.15s;
 }
 @keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+0% {
+  transform: rotate(0deg);
+}
+100% {
+  transform: rotate(360deg);
+}
 }
 
 /* end of continuous spinning circle*/
@@ -675,28 +690,28 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* ----------------------------------- */
 /* start of dual spinning circle*/
 .lds-dual-ring {
-  display: inline-block;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+width: 80px;
+height: 80px;
 }
 .lds-dual-ring:after {
-  content: " ";
-  display: block;
-  width: 64px;
-  height: 64px;
-  margin: 8px;
-  border-radius: 50%;
-  border: 6px solid var(--main_animated_figure_color);
-  border-color: var(--main_animated_figure_color) transparent var(--main_animated_figure_color) transparent;
-  animation: lds-dual-ring 1.2s linear infinite;
+content: " ";
+display: block;
+width: 64px;
+height: 64px;
+margin: 8px;
+border-radius: 50%;
+border: 6px solid var(--main_animated_figure_color);
+border-color: var(--main_animated_figure_color) transparent var(--main_animated_figure_color) transparent;
+animation: lds-dual-ring 1.2s linear infinite;
 }
 @keyframes lds-dual-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+0% {
+  transform: rotate(0deg);
+}
+100% {
+  transform: rotate(360deg);
+}
 }
 /* end of dual spinning circle*/
 /* ----------------------------------- */
@@ -705,86 +720,86 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* ----------------------------------- */
 /* start of default dot circle*/
 .lds-default {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-default div {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  background: var(--main_animated_figure_color);
-  border-radius: 50%;
-  animation: lds-default 1.2s linear infinite;
+position: absolute;
+width: 6px;
+height: 6px;
+background: var(--main_animated_figure_color);
+border-radius: 50%;
+animation: lds-default 1.2s linear infinite;
 }
 .lds-default div:nth-child(1) {
-  animation-delay: 0s;
-  top: 37px;
-  left: 66px;
+animation-delay: 0s;
+top: 37px;
+left: 66px;
 }
 .lds-default div:nth-child(2) {
-  animation-delay: -0.1s;
-  top: 22px;
-  left: 62px;
+animation-delay: -0.1s;
+top: 22px;
+left: 62px;
 }
 .lds-default div:nth-child(3) {
-  animation-delay: -0.2s;
-  top: 11px;
-  left: 52px;
+animation-delay: -0.2s;
+top: 11px;
+left: 52px;
 }
 .lds-default div:nth-child(4) {
-  animation-delay: -0.3s;
-  top: 7px;
-  left: 37px;
+animation-delay: -0.3s;
+top: 7px;
+left: 37px;
 }
 .lds-default div:nth-child(5) {
-  animation-delay: -0.4s;
-  top: 11px;
-  left: 22px;
+animation-delay: -0.4s;
+top: 11px;
+left: 22px;
 }
 .lds-default div:nth-child(6) {
-  animation-delay: -0.5s;
-  top: 22px;
-  left: 11px;
+animation-delay: -0.5s;
+top: 22px;
+left: 11px;
 }
 .lds-default div:nth-child(7) {
-  animation-delay: -0.6s;
-  top: 37px;
-  left: 7px;
+animation-delay: -0.6s;
+top: 37px;
+left: 7px;
 }
 .lds-default div:nth-child(8) {
-  animation-delay: -0.7s;
-  top: 52px;
-  left: 11px;
+animation-delay: -0.7s;
+top: 52px;
+left: 11px;
 }
 .lds-default div:nth-child(9) {
-  animation-delay: -0.8s;
-  top: 62px;
-  left: 22px;
+animation-delay: -0.8s;
+top: 62px;
+left: 22px;
 }
 .lds-default div:nth-child(10) {
-  animation-delay: -0.9s;
-  top: 66px;
-  left: 37px;
+animation-delay: -0.9s;
+top: 66px;
+left: 37px;
 }
 .lds-default div:nth-child(11) {
-  animation-delay: -1s;
-  top: 62px;
-  left: 52px;
+animation-delay: -1s;
+top: 62px;
+left: 52px;
 }
 .lds-default div:nth-child(12) {
-  animation-delay: -1.1s;
-  top: 52px;
-  left: 62px;
+animation-delay: -1.1s;
+top: 52px;
+left: 62px;
 }
 @keyframes lds-default {
-  0%, 20%, 80%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.5);
-  }
+0%, 20%, 80%, 100% {
+  transform: scale(1);
+}
+50% {
+  transform: scale(1.5);
+}
 }
 
 /* end of default dot circle*/
@@ -794,52 +809,51 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* ----------------------------------- */
 /* start of 3squares animation*/
 .lds-3squares {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
+display: inline-block;
+position: relative;
+width: 80px;
+height: 80px;
 }
 .lds-3squares div {
-  display: inline-block;
-  position: absolute;
-  left: 8px;
-  width: 16px;
-  background: var(--main_animated_figure_color);
-  animation: lds-3squares 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+display: inline-block;
+position: absolute;
+left: 8px;
+width: 16px;
+background: var(--main_animated_figure_color);
+animation: lds-3squares 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 }
 .lds-3squares div:nth-child(1) {
-  left: 8px;
-  animation-delay: -0.24s;
+left: 8px;
+animation-delay: -0.24s;
 }
 .lds-3squares div:nth-child(2) {
-  left: 32px;
-  animation-delay: -0.12s;
+left: 32px;
+animation-delay: -0.12s;
 }
 .lds-3squares div:nth-child(3) {
-  left: 56px;
-  animation-delay: 0;
+left: 56px;
+animation-delay: 0;
 }
 @keyframes lds-3squares {
-  0% {
-    top: 8px;
-    height: 64px;
-  }
-  50%, 100% {
-    top: 24px;
-    height: 32px;
-  }
+0% {
+  top: 8px;
+  height: 64px;
+}
+50%, 100% {
+  top: 24px;
+  height: 32px;
+}
 }
 
 /* 3squares animation*/
 /* ----------------------------------- */
 
 
-
 ```
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you should clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
diff --git a/loaders/12_one_color_examples/loader.css b/loaders/12_one_color_examples/loader.css
index 8de352b..6e4b70f 100644
--- a/loaders/12_one_color_examples/loader.css
+++ b/loaders/12_one_color_examples/loader.css
@@ -11,15 +11,26 @@
 
 /* general css (wrapper) */
 .basic_loader_wrapper.visible_loader{
-display: table-cell;
+  display: block;
+}
+.single_loader_holder{
+  min-width:100vw;
+  min-height: 100vh;
+  text-align: center;
+  vertical-align: middle;
+  display: table-cell;
+  height:100vh;
 }
 .basic_loader_wrapper{
-display: none;
-width: 100vw;
-height:100vh;
-background-color: var(--loader_main_background_color);
-text-align: center;
-vertical-align: middle;
+  display: none;
+  min-width: 100vw;
+  min-height:100vh;
+  background-color: var(--loader_main_background_color);
+  position:fixed;
+  top:0;
+  left:0;
+  bottom:0;
+  right: 0;
 }
 /* end of general css */
 
diff --git a/loaders/12_one_color_examples/loader.html b/loaders/12_one_color_examples/loader.html
index 4db847d..2a33647 100644
--- a/loaders/12_one_color_examples/loader.html
+++ b/loaders/12_one_color_examples/loader.html
@@ -8,67 +8,71 @@
 <body>
   <div id="basic_loaders_holder" class="basic_loader_wrapper visible_loader"> <!-- main wrapper -->
 
-    <!-- here you can pick different basic loaders -->
-    
-    <!-- circle flips like a coin -->
-    <div class="lds-circle"><div></div></div>
-    <!-- circle flips like a coin -->
-    
-    <!-- start of heart beating -->
-    <div class="lds-heart"><div></div></div>
-    <!-- end of heart beating -->
-    
-    <!-- start of loading roller -->
-    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-    <!-- end of loading roller -->
-    
-    
-    <!-- start of 3 dots moving -->
-    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-    <!-- end of 3 dots moving -->
-    
-    <br> <!-- separation for example purposes -->
-    
-    <!-- start of hour glass spinning -->
-    <div class="lds-hourglass"></div>
-    <!-- end of hour glass spinning -->
-    
-    <!-- start circular waves -->
-    <div class="lds-ripple"><div></div><div></div></div>
-    <!-- end circular waves -->
-    
-    
-    
-    
-    <!-- start of classic loading circle (spinning) -->
-    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-    <!-- end of classic loading circle (spinning) -->
-    
-    <!-- start of 6 dots loader -->
-    <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-    <!-- end of 6 dots loader -->
-    
-    <br> <!-- separation for example purposes -->
-    
-    <!-- start of continuous spinning circle -->
-    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
-    <!-- end of continuous spinning circle -->
-    
-    <!-- start of dual spinning circle -->
-    <div class="lds-dual-ring"></div>
-    <!-- end of dual spinning circle -->
-    
-    <!-- start of default dot circle -->
-    <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-    <!-- end of default dot circle -->
-    
-    <!-- start of 3squares animation -->
-    <div class="lds-3squares"><div></div><div></div><div></div></div>
-    <!-- end of 3squares animation -->
-    
-    <!-- end of picking different basic loaders -->
-    
-    <div> <!-- end of loader wrapper -->
+    <div class="single_loader_holder">
+  
+      <!-- here you can pick different basic loaders -->
+  
+      <!-- circle flips like a coin -->
+      <div class="lds-circle"><div></div></div>
+      <!-- circle flips like a coin -->
+  
+      <!-- start of heart beating -->
+      <div class="lds-heart"><div></div></div>
+      <!-- end of heart beating -->
+  
+      <!-- start of loading roller -->
+      <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+      <!-- end of loading roller -->
+  
+  
+      <!-- start of 3 dots moving -->
+      <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+      <!-- end of 3 dots moving -->
+  
+      <br> <!-- separation for example purposes -->
+  
+      <!-- start of hour glass spinning -->
+      <div class="lds-hourglass"></div>
+      <!-- end of hour glass spinning -->
+  
+      <!-- start circular waves -->
+      <div class="lds-ripple"><div></div><div></div></div>
+      <!-- end circular waves -->
+  
+  
+  
+  
+      <!-- start of classic loading circle (spinning) -->
+      <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+      <!-- end of classic loading circle (spinning) -->
+  
+      <!-- start of 6 dots loader -->
+      <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+      <!-- end of 6 dots loader -->
+  
+      <br> <!-- separation for example purposes -->
+  
+      <!-- start of continuous spinning circle -->
+      <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+      <!-- end of continuous spinning circle -->
+  
+      <!-- start of dual spinning circle -->
+      <div class="lds-dual-ring"></div>
+      <!-- end of dual spinning circle -->
+  
+      <!-- start of default dot circle -->
+      <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+      <!-- end of default dot circle -->
+  
+      <!-- start of 3squares animation -->
+      <div class="lds-3squares"><div></div><div></div><div></div></div>
+      <!-- end of 3squares animation -->
+  
+      <!-- end of picking different basic loaders -->
+  
+    </div> <!-- end of single loader holder -->
+  
+  <div> <!-- end of loader wrapper -->
   
 
 </body>
diff --git a/loaders/3d_cube_scale/README.md b/loaders/3d_cube_scale/README.md
index e1a903e..67f9181 100644
--- a/loaders/3d_cube_scale/README.md
+++ b/loaders/3d_cube_scale/README.md
@@ -61,9 +61,10 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/3d_cube_scale/loader.css b/loaders/3d_cube_scale/loader.css
index a452ae8..dff2df3 100644
--- a/loaders/3d_cube_scale/loader.css
+++ b/loaders/3d_cube_scale/loader.css
@@ -1,6 +1,7 @@
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/3d_cube_spinner/README.md b/loaders/3d_cube_spinner/README.md
index 4a6853c..abe4653 100644
--- a/loaders/3d_cube_spinner/README.md
+++ b/loaders/3d_cube_spinner/README.md
@@ -59,7 +59,9 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 /* Custom styles starts here */
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@600&display=swap');
 
-* { box-sizing: border-box; }
+.custom_loader_wrap * {
+  box-sizing: border-box;
+}
 
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
diff --git a/loaders/3d_cube_spinner/loader.css b/loaders/3d_cube_spinner/loader.css
index f40a80b..481bb67 100644
--- a/loaders/3d_cube_spinner/loader.css
+++ b/loaders/3d_cube_spinner/loader.css
@@ -1,7 +1,9 @@
 /* Custom styles starts here */
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@600&display=swap');
 
-* { box-sizing: border-box; }
+.custom_loader_wrap * {
+  box-sizing: border-box;
+}
 
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
diff --git a/loaders/3d_falling_rings/README.md b/loaders/3d_falling_rings/README.md
index 4f0f42d..c349387 100644
--- a/loaders/3d_falling_rings/README.md
+++ b/loaders/3d_falling_rings/README.md
@@ -63,13 +63,19 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 }
 .rings_loader_wrapper
 {
-	margin: 0;
-	padding: 0;
-	display: none;
-	justify-content: center;
-	align-items: center;
-	min-height: 100vh;
-	background-color: var(--loader_color_rings_background);
+  margin: 0;
+  padding: 0;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  min-width: 100vw;
+  position:fixed;
+  top:0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--loader_color_rings_background);
 }
 .rings_loader
 {
@@ -137,7 +143,7 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you should clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
diff --git a/loaders/3d_falling_rings/loader.css b/loaders/3d_falling_rings/loader.css
index 5fdb221..d21ba99 100644
--- a/loaders/3d_falling_rings/loader.css
+++ b/loaders/3d_falling_rings/loader.css
@@ -19,13 +19,19 @@
 }
 .rings_loader_wrapper
 {
- margin: 0;
- padding: 0;
- display: none;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- background-color: var(--loader_color_rings_background);
+  margin: 0;
+  padding: 0;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  min-width: 100vw;
+  position:fixed;
+  top:0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--loader_color_rings_background);
 }
 .rings_loader
 {
diff --git a/loaders/3d_flying_ball/README.md b/loaders/3d_flying_ball/README.md
index 4d6fd30..08a4277 100644
--- a/loaders/3d_flying_ball/README.md
+++ b/loaders/3d_flying_ball/README.md
@@ -60,12 +60,17 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
   display: flex;
 }
 .loader_wrapper_space{
-    background-color:  var(--loader_hole_background_color); 
-    width: 100%;
-    height: 100%;
-    min-height: 100vh;
-    justify-content: center;
-    display: none;
+  background-color:  var(--loader_hole_background_color); 
+  width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  justify-content: center;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom:0;
 }
 .MrCenter,
 .rotate_3dball {
@@ -140,7 +145,7 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you should clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
diff --git a/loaders/3d_flying_ball/loader.css b/loaders/3d_flying_ball/loader.css
index 7ff6bf7..99ad7d2 100644
--- a/loaders/3d_flying_ball/loader.css
+++ b/loaders/3d_flying_ball/loader.css
@@ -13,12 +13,17 @@
   display: flex;
 }
 .loader_wrapper_space{
-    background-color:  var(--loader_hole_background_color); 
-    width: 100%;
-    height: 100%;
-    min-height: 100vh;
-    justify-content: center;
-    display: none;
+  background-color:  var(--loader_hole_background_color); 
+  width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  justify-content: center;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom:0;
 }
 .MrCenter,
 .rotate_3dball {
diff --git a/loaders/3d_graphic_going_up/README.md b/loaders/3d_graphic_going_up/README.md
index 8521d18..1bda7f0 100644
--- a/loaders/3d_graphic_going_up/README.md
+++ b/loaders/3d_graphic_going_up/README.md
@@ -184,7 +184,7 @@ span.loader-row:nth-child(3) {
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you should clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
diff --git a/loaders/3d_rotating_color_bars/README.md b/loaders/3d_rotating_color_bars/README.md
index 17fd82c..70906c0 100644
--- a/loaders/3d_rotating_color_bars/README.md
+++ b/loaders/3d_rotating_color_bars/README.md
@@ -77,135 +77,161 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 ** you can always contact us at support@awe.media
 */
 :root{
-  --loader_custom_color_background: #D8D7D8;  /* <-- page background color */
-  --loader_3dcube_color1: cyan;  /* <-- first cube color */
-  --loader_3dcube_color2: magenta;  /* <-- second cube color */
-  --loader_3dcube_color3: yellow  /* <-- third cube color */
-}
-
-*{
-  box-sizing: border-box;
-}
-.visible_loader.square_loader{
-  display: flex;
-}
-
-.square_loader{
-  background-color: var( --loader_custom_color_background); 
-  display: none;
-  margin:0;
-  height:100vh;
-  width: 100vw;
-  justify-content:center;
-  align-items:center;
-  transform:scale(1.8);
-}
-.loader_holder {
-    width: 100px;
-    height: 100px;
-    font-size: 100px;
+    --loader_custom_color_background: #D8D7D8;  /* <-- page background color */
+    --loader_3dcube_color1: #0c4b90;  /* <-- first cube color */
+    --loader_3dcube_color2: #488ed9;  /* <-- second cube color */
+    --loader_3dcube_color3: #5e82a9  /* <-- third cube color */
+  }
+  
+  
+  .visible_loader.square_loader{
     display: flex;
-    justify-content: space-between;
-    transform: perspective(100px);
-    transform-style: preserve-3d;
-}
-.loader_holder > div {
-    width: 30%;
-    height: 100%;
-    transform-style: preserve-3d;
-}
-.loader_holder > div > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0.8;
-}
-
-.square_front_side, .back {
-    width: 100%;
-    height: 100%;
-}
-.square_front_side {
-    transform: translateZ(-0.15em);
-}
-.square_back_side {
-    transform: translateZ(0.15em);
-}
-.square_left_side {
-    width: 100%;
-    height: 100%;
-    transform-origin: left center;
-    transform: rotate3d(0, -1, 0, 90deg) translateX(-0.15em);
-}
-.square_right_side {
-    width: 100%;
-    height: 100%;
-    transform-origin: right center;
-    transform: rotate3d(0, 1, 0, 90deg) translateX(0.15em);
-}
-
-.square_top_side {
-    width: 100%;
-    height: 30%;
-    transform-origin: center top;
-    transform: rotate3d(1, 0, 0, 90deg)
-               translateY(-0.15em);
-}
-.square_bottom_side {
-    width: 100%;
-    height: 30%;
-    transform-origin: center top;
-    transform: rotate3d(1, 0, 0, 90deg)
-               translateZ(-1em)
-               translateY(-0.15em);
-}
-
-.square_color1 > div {
-    background: var( --loader_3dcube_color1); 
-}
-.square_color2 > div {
-    background: var( --loader_3dcube_color2);
-}
-.square_color3 > div {
-    background: var( --loader_3dcube_color3); 
-}
-
-.loader_holder {
-    animation: 3s flip_loader infinite;
-    animation-delay: 1s;
-}
-.loader_holder .square_color2 {
-    animation: 3s flip_color2 infinite;
-    animation-delay: 1s;
-}
-.loader_holder .square_color1 {
-    animation: 3s flip_color1 infinite;
-    animation-delay: 1s;
-}
-
-@keyframes flip_loader {
-    100% {
-        transform: perspective(100px) 
-                   rotate3d(1, 1, 1, 360deg);
-    }
-}
-@keyframes flip_color2 {
-    100% {
-        transform: rotateX(180deg);
-    }
-}
-@keyframes flip_color1 {
-    100% {
-        transform: rotateX(-180deg);
-    }
-}
+    box-sizing: border-box;
+  }
+  
+  .square_loader{
+    background-color: var( --loader_custom_color_background); 
+    display: none;
+    margin:0;
+    min-height:105vh;
+    min-width: 105vw;
+    justify-content:center;
+    align-items:center;
+    padding:0;
+    box-sizing: border-box;
+    margin-top: -5vh;
+    margin-left: -5vw;
+  }
+  
+  .loader_holder > div {
+      width: 30%;
+      height: 100%;
+      transform-style: preserve-3d;
+  }
+  .loader_holder > div > div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0.8;
+  }
+  
+  .square_front_side, .back {
+      width: 100%;
+      height: 100%;
+  }
+  .square_front_side {
+      transform: translateZ(-0.15em);
+  }
+  .square_back_side {
+      transform: translateZ(0.15em);
+  }
+  .square_left_side {
+      width: 100%;
+      height: 100%;
+      transform-origin: left center;
+      transform: rotate3d(0, -1, 0, 90deg) translateX(-0.15em);
+  }
+  .square_right_side {
+      width: 100%;
+      height: 100%;
+      transform-origin: right center;
+      transform: rotate3d(0, 1, 0, 90deg) translateX(0.15em);
+  }
+  
+  .square_top_side {
+      width: 100%;
+      height: 30%;
+      transform-origin: center top;
+      transform: rotate3d(1, 0, 0, 90deg)
+                 translateY(-0.15em);
+  }
+  .square_bottom_side {
+      width: 100%;
+      height: 30%;
+      transform-origin: center top;
+      transform: rotate3d(1, 0, 0, 90deg)
+                 translateZ(-1em)
+                 translateY(-0.15em);
+  }
+  
+  .square_color1 > div {
+      background: var( --loader_3dcube_color1); 
+  }
+  .square_color2 > div {
+      background: var( --loader_3dcube_color2);
+  }
+  .square_color3 > div {
+      background: var( --loader_3dcube_color3); 
+  }
+  
+  .loader_holder {
+  width: 100px;
+      height: 100px;
+      font-size: 100px;
+      display: flex;
+      justify-content: space-between;
+      transform: perspective(100px);
+      transform-style: preserve-3d;
+      -webkit-animation: 3s flip_loader infinite;
+      animation: 3s flip_loader infinite;
+      animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+  }
+  .loader_holder .square_color3 {
+      animation: 3s flip_color1 infinite;
+      animation-delay: 1s;
+  }
+  .loader_holder .square_color2 {
+      animation: 3s flip_color2 infinite;
+      animation-delay: 1s;
+  }
+  .loader_holder .square_color1 {
+      animation: 3s flip_color1 infinite;
+      animation-delay: 1s;
+  }
+  
+  @-webkit-keyframes flip_loader {
+  0% {
+    transform: rotate3d(1, 1, 1, 0deg);
+  }
+  50% {
+    transform: rotate3d(1, 1, 1, 180deg);
+  }
+      100% {
+          transform: perspective(100px) 
+                     rotate3d(1, 1, 1, 360deg);
+      }
+  }
+  
+  @keyframes flip_loader {
+  0% {
+    transform: rotate3d(1, 1, 1, 0deg);
+  }
+  50% {
+    transform: rotate3d(1, 1, 1, 180deg);
+  }
+      100% {
+          transform: perspective(100px) 
+                     rotate3d(1, 1, 1, 360deg);
+      }
+  }
+  @keyframes flip_color2 {
+      100% {
+          transform: rotateX(180deg);
+      }
+  }
+  @keyframes flip_color1 {
+      100% {
+          transform: rotateX(-180deg);
+      }
+  }
 
 
 ```
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you should clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
diff --git a/loaders/3d_rotating_color_bars/loader.css b/loaders/3d_rotating_color_bars/loader.css
index 3ae4b94..1563727 100644
--- a/loaders/3d_rotating_color_bars/loader.css
+++ b/loaders/3d_rotating_color_bars/loader.css
@@ -4,125 +4,153 @@
 ** you can always contact us at support@awe.media
 */
 :root{
-  --loader_custom_color_background: #D8D7D8;  /* <-- page background color */
-  --loader_3dcube_color1: cyan;  /* <-- first cube color */
-  --loader_3dcube_color2: magenta;  /* <-- second cube color */
-  --loader_3dcube_color3: yellow  /* <-- third cube color */
-}
-
-*{
-  box-sizing: border-box;
-}
-.visible_loader.square_loader{
-  display: flex;
-}
-
-.square_loader{
-  background-color: var( --loader_custom_color_background); 
-  display: none;
-  margin:0;
-  height:100vh;
-  width: 100vw;
-  justify-content:center;
-  align-items:center;
-  transform:scale(1.8);
-}
-.loader_holder {
-    width: 100px;
-    height: 100px;
-    font-size: 100px;
+    --loader_custom_color_background: #D8D7D8;  /* <-- page background color */
+    --loader_3dcube_color1: #0c4b90;  /* <-- first cube color */
+    --loader_3dcube_color2: #488ed9;  /* <-- second cube color */
+    --loader_3dcube_color3: #5e82a9  /* <-- third cube color */
+  }
+  
+  
+  .visible_loader.square_loader{
     display: flex;
-    justify-content: space-between;
-    transform: perspective(100px);
-    transform-style: preserve-3d;
-}
-.loader_holder > div {
-    width: 30%;
-    height: 100%;
-    transform-style: preserve-3d;
-}
-.loader_holder > div > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0.8;
-}
-
-.square_front_side, .back {
-    width: 100%;
-    height: 100%;
-}
-.square_front_side {
-    transform: translateZ(-0.15em);
-}
-.square_back_side {
-    transform: translateZ(0.15em);
-}
-.square_left_side {
-    width: 100%;
-    height: 100%;
-    transform-origin: left center;
-    transform: rotate3d(0, -1, 0, 90deg) translateX(-0.15em);
-}
-.square_right_side {
-    width: 100%;
-    height: 100%;
-    transform-origin: right center;
-    transform: rotate3d(0, 1, 0, 90deg) translateX(0.15em);
-}
-
-.square_top_side {
-    width: 100%;
-    height: 30%;
-    transform-origin: center top;
-    transform: rotate3d(1, 0, 0, 90deg)
-               translateY(-0.15em);
-}
-.square_bottom_side {
-    width: 100%;
-    height: 30%;
-    transform-origin: center top;
-    transform: rotate3d(1, 0, 0, 90deg)
-               translateZ(-1em)
-               translateY(-0.15em);
-}
-
-.square_color1 > div {
-    background: var( --loader_3dcube_color1); 
-}
-.square_color2 > div {
-    background: var( --loader_3dcube_color2);
-}
-.square_color3 > div {
-    background: var( --loader_3dcube_color3); 
-}
-
-.loader_holder {
-    animation: 3s flip_loader infinite;
-    animation-delay: 1s;
-}
-.loader_holder .square_color2 {
-    animation: 3s flip_color2 infinite;
-    animation-delay: 1s;
-}
-.loader_holder .square_color1 {
-    animation: 3s flip_color1 infinite;
-    animation-delay: 1s;
-}
-
-@keyframes flip_loader {
-    100% {
-        transform: perspective(100px) 
-                   rotate3d(1, 1, 1, 360deg);
-    }
-}
-@keyframes flip_color2 {
-    100% {
-        transform: rotateX(180deg);
-    }
-}
-@keyframes flip_color1 {
-    100% {
-        transform: rotateX(-180deg);
-    }
-}
\ No newline at end of file
+    box-sizing: border-box;
+  }
+  
+  .square_loader{
+    background-color: var( --loader_custom_color_background); 
+    display: none;
+    margin:0;
+    min-height:105vh;
+    min-width: 105vw;
+    justify-content:center;
+    align-items:center;
+    padding:0; 
+    box-sizing: border-box; 
+    margin-top: -5vh;
+    margin-left: -5vw;
+  }
+  
+  .loader_holder > div {
+      width: 30%;
+      height: 100%;
+      transform-style: preserve-3d;
+  }
+  .loader_holder > div > div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0.8;
+  }
+  
+  .square_front_side, .back {
+      width: 100%;
+      height: 100%;
+  }
+  .square_front_side {
+      transform: translateZ(-0.15em);
+  }
+  .square_back_side {
+      transform: translateZ(0.15em);
+  }
+  .square_left_side {
+      width: 100%;
+      height: 100%;
+      transform-origin: left center;
+      transform: rotate3d(0, -1, 0, 90deg) translateX(-0.15em);
+  }
+  .square_right_side {
+      width: 100%;
+      height: 100%;
+      transform-origin: right center;
+      transform: rotate3d(0, 1, 0, 90deg) translateX(0.15em);
+  }
+  
+  .square_top_side {
+      width: 100%;
+      height: 30%;
+      transform-origin: center top;
+      transform: rotate3d(1, 0, 0, 90deg)
+                 translateY(-0.15em);
+  }
+  .square_bottom_side {
+      width: 100%;
+      height: 30%;
+      transform-origin: center top;
+      transform: rotate3d(1, 0, 0, 90deg)
+                 translateZ(-1em)
+                 translateY(-0.15em);
+  }
+  
+  .square_color1 > div {
+      background: var( --loader_3dcube_color1); 
+  }
+  .square_color2 > div {
+      background: var( --loader_3dcube_color2);
+  }
+  .square_color3 > div {
+      background: var( --loader_3dcube_color3); 
+  }
+  
+  .loader_holder {
+  width: 100px;
+      height: 100px;
+      font-size: 100px;
+      display: flex;
+      justify-content: space-between;
+      transform: perspective(100px);
+      transform-style: preserve-3d;
+      -webkit-animation: 3s flip_loader infinite;
+      animation: 3s flip_loader infinite;
+      animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+  }
+  .loader_holder .square_color3 {
+      animation: 3s flip_color1 infinite;
+      animation-delay: 1s;
+  }
+  .loader_holder .square_color2 {
+      animation: 3s flip_color2 infinite;
+      animation-delay: 1s;
+  }
+  .loader_holder .square_color1 {
+      animation: 3s flip_color1 infinite;
+      animation-delay: 1s;
+  }
+  
+  @-webkit-keyframes flip_loader {
+  0% {
+    transform: rotate3d(1, 1, 1, 0deg);
+  }
+  50% {
+    transform: rotate3d(1, 1, 1, 180deg);
+  }
+      100% {
+          transform: perspective(100px) 
+                     rotate3d(1, 1, 1, 360deg);
+      }
+  }
+  
+  @keyframes flip_loader {
+  0% {
+    transform: rotate3d(1, 1, 1, 0deg);
+  }
+  50% {
+    transform: rotate3d(1, 1, 1, 180deg);
+  }
+      100% {
+          transform: perspective(100px) 
+                     rotate3d(1, 1, 1, 360deg);
+      }
+  }
+  @keyframes flip_color2 {
+      100% {
+          transform: rotateX(180deg);
+      }
+  }
+  @keyframes flip_color1 {
+      100% {
+          transform: rotateX(-180deg);
+      }
+  }
+  
+  
\ No newline at end of file
diff --git a/loaders/4_plates_spinner/README.md b/loaders/4_plates_spinner/README.md
index ffdf11b..5596dd7 100644
--- a/loaders/4_plates_spinner/README.md
+++ b/loaders/4_plates_spinner/README.md
@@ -154,7 +154,7 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoul clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
diff --git a/loaders/climbing_box/README.md b/loaders/climbing_box/README.md
index 6488eaa..b36d680 100644
--- a/loaders/climbing_box/README.md
+++ b/loaders/climbing_box/README.md
@@ -45,11 +45,12 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
 
 .custom_loader_wrap {
+  box-sizing: border-box;
   overflow: auto; 
   overflow-x: hidden;
   overflow: hidden;
diff --git a/loaders/climbing_box/loader.css b/loaders/climbing_box/loader.css
index e07c457..19b1de7 100644
--- a/loaders/climbing_box/loader.css
+++ b/loaders/climbing_box/loader.css
@@ -1,11 +1,12 @@
 /* Custom styles starts here */
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
 
 .custom_loader_wrap {
+  box-sizing: border-box;
   overflow: auto; 
   overflow-x: hidden;
   overflow: hidden;
diff --git a/loaders/disappearing_falling_cube/README.md b/loaders/disappearing_falling_cube/README.md
index e1d3013..72744ba 100644
--- a/loaders/disappearing_falling_cube/README.md
+++ b/loaders/disappearing_falling_cube/README.md
@@ -87,6 +87,11 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
   display: none;
   justify-content: center;
   align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 .loader_bigcube {
   width: 200px;
diff --git a/loaders/disappearing_falling_cube/loader.css b/loaders/disappearing_falling_cube/loader.css
index 3afffef..3f871a4 100644
--- a/loaders/disappearing_falling_cube/loader.css
+++ b/loaders/disappearing_falling_cube/loader.css
@@ -20,6 +20,11 @@
   display: none;
   justify-content: center;
   align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 .loader_bigcube {
   width: 200px;
diff --git a/loaders/flipping_paper_rhombus/README.md b/loaders/flipping_paper_rhombus/README.md
index 49025d6..51adfce 100644
--- a/loaders/flipping_paper_rhombus/README.md
+++ b/loaders/flipping_paper_rhombus/README.md
@@ -64,7 +64,12 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
   background-color: var(--loader_origami_background);
   display: none;
   justify-content: center;
-  align-items: center
+  align-items: center;
+  position: fixed;
+  top:0;
+  right:0;
+  left: 0;
+  bottom: 0;
 }
 
 .cssload-thecube {
@@ -238,7 +243,7 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you should clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
diff --git a/loaders/flipping_paper_rhombus/loader.css b/loaders/flipping_paper_rhombus/loader.css
index 72ce9e5..65cc9e1 100644
--- a/loaders/flipping_paper_rhombus/loader.css
+++ b/loaders/flipping_paper_rhombus/loader.css
@@ -20,7 +20,12 @@
   background-color: var(--loader_origami_background);
   display: none;
   justify-content: center;
-  align-items: center
+  align-items: center;
+  position: fixed;
+  top:0;
+  right:0;
+  left: 0;
+  bottom: 0;
 }
 
 .cssload-thecube {
diff --git a/loaders/flying_panel/README.md b/loaders/flying_panel/README.md
index 29a83a8..44d4abb 100644
--- a/loaders/flying_panel/README.md
+++ b/loaders/flying_panel/README.md
@@ -46,10 +46,12 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
+	box-sizing: border-box;
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
   overflow: hidden;
diff --git a/loaders/flying_panel/loader.css b/loaders/flying_panel/loader.css
index 5e47734..0be43a6 100644
--- a/loaders/flying_panel/loader.css
+++ b/loaders/flying_panel/loader.css
@@ -1,7 +1,9 @@
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
+	box-sizing: border-box;
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
   overflow: hidden;
diff --git a/loaders/moving_truck/README.md b/loaders/moving_truck/README.md
index 649e255..7eab8c5 100644
--- a/loaders/moving_truck/README.md
+++ b/loaders/moving_truck/README.md
@@ -51,9 +51,10 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/moving_truck/loader.css b/loaders/moving_truck/loader.css
index a9643da..92da033 100644
--- a/loaders/moving_truck/loader.css
+++ b/loaders/moving_truck/loader.css
@@ -1,6 +1,7 @@
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/rainbow_welcome/README.md b/loaders/rainbow_welcome/README.md
index 2481685..61f65ca 100644
--- a/loaders/rainbow_welcome/README.md
+++ b/loaders/rainbow_welcome/README.md
@@ -5629,29 +5629,15 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you should clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
 
 ```javascript
 
-(async function() { 
-  await awe.on_state('ready'); 
-  document.getElementById('main_animation_holder').classList.remove('visible_loader');
-})();
-
-
-```
-
-
-### Step Four
-
-Copy below **JS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section.
-
-```js
-
 var animation_reset_counter = 0;
+var animation_reset_flag = true; 
 const animated_colorful_loader = document.querySelector('.text7');
 
 animated_colorful_loader.onanimationend = () => {
@@ -5660,16 +5646,24 @@ animated_colorful_loader.onanimationend = () => {
     //console.log('Animation ended');
     document.querySelector('#inner_loader_content').style.display = "none";
     animation_reset_counter = 0;
-     setTimeout(function(){ reset_color_animation(); }, 500);
+     if(animation_reset_flag) {setTimeout(function(){ reset_color_animation(); }, 500);}
   }
 };
 function reset_color_animation(){
-	document.querySelector('#inner_loader_content').style.display = "flex";
+    document.querySelector('#inner_loader_content').style.display = "flex";
 }
 
 
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('main_animation_holder').classList.remove('visible_loader');
+   animation_reset_flag = false;
+})();
+
+
 ```
 
+
 ## Customization
 
 You can modify these custom properties inside `:root` to change how the loader looks on the front end. And if the style you're looking for is not listed here, or, if you require a completely different custom loader, you can always contact us at **support@awe.media**
diff --git a/loaders/rainbow_welcome/loader.js b/loaders/rainbow_welcome/loader.js
index 37d30b7..785687a 100644
--- a/loaders/rainbow_welcome/loader.js
+++ b/loaders/rainbow_welcome/loader.js
@@ -1,4 +1,5 @@
 var animation_reset_counter = 0;
+var animation_reset_flag = true; 
 const animated_colorful_loader = document.querySelector('.text7');
 
 animated_colorful_loader.onanimationend = () => {
@@ -7,9 +8,16 @@ animated_colorful_loader.onanimationend = () => {
     //console.log('Animation ended');
     document.querySelector('#inner_loader_content').style.display = "none";
     animation_reset_counter = 0;
-     setTimeout(function(){ reset_color_animation(); }, 500);
+     if(animation_reset_flag) {setTimeout(function(){ reset_color_animation(); }, 500);}
   }
 };
 function reset_color_animation(){
-	document.querySelector('#inner_loader_content').style.display = "flex";
-}
\ No newline at end of file
+    document.querySelector('#inner_loader_content').style.display = "flex";
+}
+
+
+(async function() { 
+  await awe.on_state('ready'); 
+  document.getElementById('main_animation_holder').classList.remove('visible_loader');
+   animation_reset_flag = false;
+})();
\ No newline at end of file
diff --git a/loaders/rotating_3d_cube/README.md b/loaders/rotating_3d_cube/README.md
index bce44a9..90b45b1 100644
--- a/loaders/rotating_3d_cube/README.md
+++ b/loaders/rotating_3d_cube/README.md
@@ -51,9 +51,10 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/rotating_3d_cube/loader.css b/loaders/rotating_3d_cube/loader.css
index 7c192a9..1689172 100644
--- a/loaders/rotating_3d_cube/loader.css
+++ b/loaders/rotating_3d_cube/loader.css
@@ -1,6 +1,7 @@
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/rotating_3d_cube_with_shadow/README.md b/loaders/rotating_3d_cube_with_shadow/README.md
index acb7035..d0a6158 100644
--- a/loaders/rotating_3d_cube_with_shadow/README.md
+++ b/loaders/rotating_3d_cube_with_shadow/README.md
@@ -47,9 +47,10 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-*, *::before, *::after {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/rotating_3d_cube_with_shadow/loader.css b/loaders/rotating_3d_cube_with_shadow/loader.css
index 5c1f830..bfdd052 100644
--- a/loaders/rotating_3d_cube_with_shadow/loader.css
+++ b/loaders/rotating_3d_cube_with_shadow/loader.css
@@ -1,6 +1,7 @@
-*, *::before, *::after {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/rotating_balls/README.md b/loaders/rotating_balls/README.md
index 8949b64..642bef9 100644
--- a/loaders/rotating_balls/README.md
+++ b/loaders/rotating_balls/README.md
@@ -57,9 +57,10 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/rotating_balls/loader.css b/loaders/rotating_balls/loader.css
index b4b3102..73e5eb7 100644
--- a/loaders/rotating_balls/loader.css
+++ b/loaders/rotating_balls/loader.css
@@ -1,6 +1,7 @@
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/rotating_planet/README.md b/loaders/rotating_planet/README.md
index e871091..51d0f0a 100644
--- a/loaders/rotating_planet/README.md
+++ b/loaders/rotating_planet/README.md
@@ -59,9 +59,10 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 @import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/rotating_planet/loader.css b/loaders/rotating_planet/loader.css
index 3fc5659..11916e4 100644
--- a/loaders/rotating_planet/loader.css
+++ b/loaders/rotating_planet/loader.css
@@ -1,8 +1,9 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/spinning_circles/README.md b/loaders/spinning_circles/README.md
index f380b55..f6a5187 100644
--- a/loaders/spinning_circles/README.md
+++ b/loaders/spinning_circles/README.md
@@ -55,7 +55,7 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
 
diff --git a/loaders/spinning_circles/loader.css b/loaders/spinning_circles/loader.css
index 676f733..92ad38e 100644
--- a/loaders/spinning_circles/loader.css
+++ b/loaders/spinning_circles/loader.css
@@ -1,6 +1,7 @@
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/waving_stripes/README.md b/loaders/waving_stripes/README.md
index 9957086..b7e7d51 100644
--- a/loaders/waving_stripes/README.md
+++ b/loaders/waving_stripes/README.md
@@ -77,6 +77,11 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
   min-width: 100vw;
   min-height: 100vh;
   display:none;
+  position:fixed;
+  top:0;
+  right:0;
+  left:0;
+  bottom:0;
 }
 
 ul.page_loader_content {
@@ -229,7 +234,7 @@ li.line:nth-child(15) span {
 
 ### Step Three
 
-Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you shoud clear out the existing codes first).
+Copy below **JavaScript** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM LOADING SCREEN ENABLED** -> **JS** section (you should clear out the existing codes first).
 
 For more details on events provided by your AWE app, please check [https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app](https://github.com/awe-media/awe.js/wiki/How-To:-Events-provided-by-my-awe-app)
 
diff --git a/loaders/waving_stripes/loader.css b/loaders/waving_stripes/loader.css
index 554f245..c8d2587 100644
--- a/loaders/waving_stripes/loader.css
+++ b/loaders/waving_stripes/loader.css
@@ -20,6 +20,11 @@
   min-width: 100vw;
   min-height: 100vh;
   display:none;
+  position:fixed;
+  top:0;
+  right:0;
+  left:0;
+  bottom:0;
 }
  
  ul.page_loader_content {
diff --git a/loaders/wobbling_circle/README.md b/loaders/wobbling_circle/README.md
index ffa2ddd..c78b58f 100644
--- a/loaders/wobbling_circle/README.md
+++ b/loaders/wobbling_circle/README.md
@@ -44,9 +44,10 @@ Copy below **CSS** code to **Setting** -> **PROJECT BRANDING** -> **FULL CUSTOM
 
 ```css
 
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
diff --git a/loaders/wobbling_circle/loader.css b/loaders/wobbling_circle/loader.css
index 039a8fe..7d90220 100644
--- a/loaders/wobbling_circle/loader.css
+++ b/loaders/wobbling_circle/loader.css
@@ -1,6 +1,7 @@
-* {
+.custom_loader_wrap * {
   box-sizing: border-box;
 }
+
 .custom_loader_wrap {
   overflow: auto; /* location bar hack */
   overflow-x: hidden;
