Merge pull request #6 from newfold-labs/preloader-flow

Change preloader flow
newfold-labs · Sep 26, 2023 · 06909ff · 06909ff
2 parents 6453332 + f8ad9fe
commit 06909ff
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>