Change preloader flow

moving background color to the iframe itself to prevent LCS when the content is fetched. we are also changing the preloader to another icon to match this flow better.
newfold-labs · Sep 26, 2023 · f8ad9fe · f8ad9fe
1 parent 6453332
commit f8ad9fe
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 44 deletions.
diff --git a/includes/assets/ctb.css b/includes/assets/ctb.css
@@ -33,16 +33,14 @@ body.noscroll {
 .global-ctb-modal-content {
     align-items: center;
     background-color: white;
-    background: white;
+    background: transparent;
     color: black;
     display: flex;
-    height: 80vh;
     justify-content: center;
     margin: auto;
     max-height: 80vh;
+    min-width: 960px;
     max-width: 80vw;
-    min-height: 80vh;
-    min-width: 80vw;
     padding: 0;
     position: relative;
     z-index: 2;
@@ -58,12 +56,13 @@ body.noscroll {
 }
 
 .global-ctb-modal iframe {
+    background-color: white;
+    min-height: 550px;
     height: 100%;
     max-height: 100%;
-    max-width: 100%;
-    min-height: 100%;
-    min-width:100%;
     width: 100%;
+    max-width: 100%;
+    border-radius: 5px;
     z-index: 1;
 }
 
@@ -73,51 +72,41 @@ body.noscroll {
 }
 
 .global-ctb-loader {
-    -webkit-animation: globalctbloader .9s infinite linear;
-    animation: globalctbloader .9s infinite linear;
-    background: #3575d3;
-    background: linear-gradient(to right, #3575d3 5%, rgba(0, 0, 0, 0) 32%);
-    border-radius: 50%;
-    height: 5rem;
+    width: 8px;
+    height: 40px;
+    border-radius: 4px;
+    display: block;
+    margin: 20px auto;
     position: relative;
-    transform: translateZ(0);
-    width: 5rem;
-    will-change: transform;
+    background: currentColor;
+    color: #FFF;
+    box-sizing: border-box;
+    animation: globalctbloader 0.3s 0.3s linear infinite alternate;
 }
 
-.global-ctb-loader:before {
-    background: #3575d3;
-    border-radius: 100% 0 0 0;
-    content: "";
-    height: 50%;
-    left: 0;
+.global-ctb-loader::after,
+.global-ctb-loader::before {
+    content: '';
+    width: 8px;
+    height: 40px;
+    border-radius: 4px;
+    background: currentColor;
     position: absolute;
-    top: 0;
-    width: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 20px;
+    box-sizing: border-box;
+    animation: globalctbloader 0.3s  0.45s  linear infinite alternate;
 }
 
-.global-ctb-loader:after {
-    background: #fff;
-    border-radius: 50%;
-    bottom: 0;
-    content: "";
-    height: 88%;
-    left: 0;
-    margin: auto;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 88%;
+.global-ctb-loader:before {
+    left: -20px;
+    animation-delay: 0s;
 }
 
 @keyframes globalctbloader {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
+    0%   { height: 48px} 
+    100% { height: 4px}
 }
 
 .global-ctb-modal-close {

diff --git a/includes/assets/ctb.js b/includes/assets/ctb.js
@@ -31,6 +31,8 @@
                 }
             })
             .then(data => {
+                // enable close button
+                modalWindow.querySelector('.global-ctb-modal-close').style.display = 'flex';
                 // set the content to an iframe of specified url
                 let iframe = document.createElement('iframe');
                 iframe.src = data.url;
@@ -112,7 +114,7 @@
 		<div class="global-ctb-modal">
 			<div class="global-ctb-modal-overlay" data-a11y-dialog-destroy></div>
 			<div role="document" class="global-ctb-modal-content">
-				<div class="global-ctb-modal-close" data-a11y-dialog-destroy>✕</div>
+				<div class="global-ctb-modal-close" data-a11y-dialog-destroy style="display:none;">✕</div>
 				<div class="global-ctb-loader"></div>
 			</div>
 		</div>