From 9fef30d6fb8759e18aa93b4e3c446bcf08c27979 Mon Sep 17 00:00:00 2001
From: RakshithRAcharya <rakshithacharya1030@gmail.com>
Date: Fri, 15 Oct 2021 16:03:35 +0530
Subject: [PATCH 1/2] Spinner animation

---
 css/spinner.css | 26 ++++++++++++++++++++++++++
 index.html      | 10 ++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 css/spinner.css

diff --git a/css/spinner.css b/css/spinner.css
new file mode 100644
index 0000000..683279d
--- /dev/null
+++ b/css/spinner.css
@@ -0,0 +1,26 @@
+  .loader-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #242f3f;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .loader {
+    display: inline-block;
+    position: relative;
+    height: 150px;
+    width: 150px;
+    border: 4px solid #Fff;
+    animation: loader 2s infinite ease;
+  }
+  @keyframes loader {
+    0% { transform: rotate(0deg);}
+    25% { transform: rotate(360deg);}
+    50% { transform: rotate(360deg);}
+    75% { transform: rotate(360deg);}
+    100% { transform: rotate(0deg);}
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index 240cffb..ce6b578 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
       rel="stylesheet"
     />
     <link href="css/styles.css" rel="stylesheet" />
+    <link href="css/spinner.css" rel="stylesheet"/>
     <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="./js/lazyload.js"></script>
@@ -1166,6 +1167,15 @@ <h5 class="text-primary">Founding Member</h5>
       </div>
     </footer>
 
+    <div class="loader-wrapper">
+      <img class="loader" src="img/acm_logo.png"/>
+    </div>
+
+    <script>
+    $(window).on("load",function(){
+      $(".loader-wrapper").fadeOut(1);});
+    </script>
+
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js "></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js "></script>

From b99042c8afdc6904e56d0bc421ac496b11a104f8 Mon Sep 17 00:00:00 2001
From: RakshithRAcharya <rakshithacharya1030@gmail.com>
Date: Fri, 15 Oct 2021 18:17:00 +0530
Subject: [PATCH 2/2] Added spining cube instead

---
 css/spinner.css | 63 +++++++++++++++++++++++++++++++++++++------------
 index.html      | 11 ++++++++-
 2 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/css/spinner.css b/css/spinner.css
index 683279d..e46da14 100644
--- a/css/spinner.css
+++ b/css/spinner.css
@@ -4,23 +4,56 @@
     position: absolute;
     top: 0;
     left: 0;
+    /* border-radius: 50%; */
     background-color: #242f3f;
     display:flex;
     justify-content: center;
     align-items: center;
   }
-  .loader {
-    display: inline-block;
-    position: relative;
-    height: 150px;
-    width: 150px;
-    border: 4px solid #Fff;
-    animation: loader 2s infinite ease;
-  }
-  @keyframes loader {
-    0% { transform: rotate(0deg);}
-    25% { transform: rotate(360deg);}
-    50% { transform: rotate(360deg);}
-    75% { transform: rotate(360deg);}
-    100% { transform: rotate(0deg);}
-  }
\ No newline at end of file
+  .cube-wrap {
+    width: 120px;
+    height: 120px;
+    -webkit-perspective: 2000px;
+    -webkit-perspective-origin: 50% -500px;
+    }
+    .single-box {
+    background-image: url(https://pesuecc.acm.org/img/acmlogo.png);
+    background-size: cover;
+    display: block;
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background-color: #60c2ef;
+    -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
+    -webkit-transform-origin: 50% 50% 0;
+    border: 3px solid #fff;
+    }
+    .box {
+    -webkit-transform-style: preserve-3d;
+    -webkit-animation: rotate 10s infinite linear;
+    }
+    .side-front { 
+    -webkit-transform: translateZ(180px);
+    }
+    .side-back { 
+    -webkit-transform: rotateY(180deg) translateZ(180px);
+    }
+    .side-top {
+    background-image: url(https://pesuecc.acm.org/img/acmlogo.png);
+    -webkit-transform: rotateX(90deg) translateZ(180px);
+    }
+    .side-bottom { 
+    -webkit-transform: rotateX(-90deg) translateZ(180px); 
+    }
+    .side-left { 
+    -webkit-transform: rotateY(-90deg) translateZ(180px); 
+    }
+    .side-right { 
+    -webkit-transform: rotateY(90deg) translateZ(180px); 
+    }
+    
+    @-webkit-keyframes rotate {
+    0% { -webkit-transform: rotateY(0); }
+    100% { -webkit-transform: rotateY(360deg); }
+    }
+    
\ No newline at end of file
diff --git a/index.html b/index.html
index ce6b578..67a92d3 100644
--- a/index.html
+++ b/index.html
@@ -1168,7 +1168,16 @@ <h5 class="text-primary">Founding Member</h5>
     </footer>
 
     <div class="loader-wrapper">
-      <img class="loader" src="img/acm_logo.png"/>
+      <div class="cube-wrap">
+        <div class="box">
+          <div class="single-box side-back"></div>
+          <div class="single-box side-top"></div>
+          <div class="single-box side-bottom"></div>
+          <div class="single-box side-left"></div>
+          <div class="single-box side-right"></div>
+          <div class="single-box side-front"></div>
+        </div>
+      </div>
     </div>
 
     <script>