General fixes to the example custom loaders.

awe-media · Jan 25, 2022 · 17903a8 · 17903a8
1 parent 7d7cd5f
commit 17903a8
Show file tree

Hide file tree

Showing 41 changed files with 1,000 additions and 838 deletions.
diff --git a/loaders/12_one_color_examples/README.md b/loaders/12_one_color_examples/README.md
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)