Update webinar transition (#113)

Signed-off-by: Md Mohin Uddin <[email protected]>

Author: mohin7

layouts/_default/webinar.html

@@ -4,8 +4,17 @@
 {{ end }}
 
 {{ define "main" }}
+<!-- preloader start  -->
+<div class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader">
+  <span class="spinner"></span>
+  <p class="font-size-12 mt-10 pl-5">
+    LOADING
+  </p>
+</div>
+<!-- preloader end -->
+
 <!-- hero  area start -->
-<section class="hero-area-2" id="webinarHeroArea">
+<section class="hero-area-2 is-hidden" id="webinarHeroArea">
   <div class="container">
     <div class="columns">
       <div class="column is-8">
@@ -103,7 +112,7 @@ <h6>Pulak Kanti Bhowmick</h6>
             <!-- form start  -->
             <div class="registration-form">
               <h3>Register Now</h3>
-              <div class="circle-shape"><img src="/assets/images/webinar/circle-shape.jpg" alt=""></div>
+              <div class="circle-shape"><img src="/assets/images/webinar/circle-shape.png" alt=""></div>
               <!-- registration form start  -->
               <!-- https://stackoverflow.com/a/29014676 -->
               <form method="post" action="https://x.appscode.com/_/webinars/register"
@@ -397,10 +406,10 @@ <h1 class="is-ellipsis-3 mb-8">{{ .snippet.title }}</h1>
           wbody.replaceChildren();
 
           var webinars = JSON.parse(xhr.responseText);
-          // console.log( webinars );
-          if(webinars === null) {
-            document.querySelector('#webinarHeroArea').classList.add('is-hidden')
-          }else {
+          //  Add preloader 
+          document.querySelector('.ac-preloader')?.classList.add('is-hidden')
+          if(webinars !== null) {
+            document.querySelector('#webinarHeroArea')?.classList.remove('is-hidden')
             for (let i = 0; i < Math.min(webinars.length, 3); i++) {
             let w = webinars[i];
             let date = new Date(w.schedules[0]);
@@ -499,8 +508,7 @@ <h5 class="mb-20 mt-30">Webinar Speakers</h5>
           })
           // Webinar tabs end
           }
-         
-        } else {
+          } else {
           // location.reload();
         }
       }

static/assets/js/main.js

@@ -235,6 +235,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
 // features products 
 $(document).ready(function () {
+  $(this).scrollTop(0);
+  
   $('[data-serialscrolling]').serialscrolling({
 
     // selector
@@ -341,7 +343,7 @@ owlSocialProve.owlCarousel({
 const searchWebinar = document.querySelector(".search-box input");
 let allWebinar = document.querySelectorAll('.webinar-video')
 
-searchWebinar.addEventListener('keyup', function(){
+searchWebinar?.addEventListener('keyup', function(){
   Array.from(allWebinar).forEach(singleWebinar => {
     let titleHtml = singleWebinar.querySelectorAll('h1');
     Array.from(titleHtml).forEach(title => {

static/assets/sass/base/_webinar.scss

@@ -536,6 +536,7 @@ $poppins: "Poppins", sans-serif;
     height: 0;
     position: relative;
     padding-top: 56.25%;
+    background-color: #f2f3f4;
 
     &.active-overlay {
       &:after {

static/assets/sass/components/_preloader.scss

@@ -0,0 +1,68 @@
+.ac-preloader {
+  position: fixed;
+  height: 100vh;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  background-color: $ac-white;
+}
+
+.spinner {
+  position: relative;
+}
+
+.spinner:before,
+.spinner:after {
+  content: "";
+  position: relative;
+  display: block;
+}
+
+.spinner:before {
+  -webkit-animation: spinner 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+  animation: spinner 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+  width: 2em;
+  height: 2em;
+  background-color: $ac-primary;
+}
+
+.spinner:after {
+  -webkit-animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+  animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+  bottom: -0.5em;
+  height: 0.25em;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+@-webkit-keyframes spinner {
+  50% {
+    border-radius: 50%;
+    transform: scale(0.5) rotate(360deg);
+  }
+  100% {
+    transform: scale(1) rotate(720deg);
+  }
+}
+
+@keyframes spinner {
+  50% {
+    border-radius: 50%;
+    transform: scale(0.5) rotate(360deg);
+  }
+  100% {
+    transform: scale(1) rotate(720deg);
+  }
+}
+@-webkit-keyframes shadow {
+  50% {
+    transform: scale(0.5);
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}
+@keyframes shadow {
+  50% {
+    transform: scale(0.5);
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}