From beb83f6291878bbc84d29ebafc64e54f4a498813 Mon Sep 17 00:00:00 2001
From: AniketTewari <72705797+AniketTewari@users.noreply.github.com>
Date: Thu, 5 Oct 2023 11:39:56 +0530
Subject: [PATCH] Create AnimatedSpinner.html

---
 AnimatedSpinner.html | 143 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 AnimatedSpinner.html
diff --git a/AnimatedSpinner.html b/AnimatedSpinner.html
new file mode 100644
index 0000000..dd32460
--- /dev/null
+++ b/AnimatedSpinner.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
+
+*{
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+  box-sizing: border-box;
+
+}
+body{
+  width: 100vw;
+  height: 100vh;
+  background-color: #182C61;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  animation: bgcolor 5s infinite linear;
+}
+
+@keyframes bgcolor {
+  0%{
+    background-color: #182C61;
+  }
+  25%{
+    background-color:  #2C3A47;
+  }
+  50%{
+    background-color: #2c3e50;
+  }
+  100%{
+    background-color: #006266;
+  }
+
+}
+h3{
+  font-weight: 300;
+  color:white;
+  margin-top: 10px;
+}
+.spinner{
+  height: 50px;
+  width: 50px;
+}
+
+.spinner .ball{
+  width: 38px;
+  height: 38px;
+  position: absolute;
+  transform: rotate(225deg);
+  opacity: 0;
+  animation-name: rotate;
+  animation-duration: 4s;
+  animation-iteration-count: infinite;
+}
+
+
+.spinner .ball::after{
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
+  border-radius: 50%;
+}
+
+
+@keyframes rotate {
+  0%{
+    opacity: 1;
+    transform: rotate(225deg);
+    animation-timing-function: ease-out;
+  }
+ 7%{
+    transform: rotate(345deg);
+    animation-timing-function: linear;
+  }
+  30%{
+    transform: rotate(455deg);
+    animation-timing-function: ease-in-out;
+  }
+
+  39%{
+    transform: rotate(690deg);
+    opacity: 1;
+    animation-timing-function: linear;
+  }
+
+  70%{
+    transform: rotate(815deg);
+    animation-timing-function: ease-out;
+  }
+
+  75%{
+    transform: rotate(945deg);
+  }
+
+  76%{
+    transform: rotate(945deg);
+    opacity: 0;
+  }
+  100%{
+    transform: rotate(945deg);
+    opacity: 0;
+  }
+}
+
+
+.spinner .ball:nth-child(2){
+  animation-delay: 240ms;
+}
+.spinner .ball:nth-child(3){
+  animation-delay: 480ms;
+}
+
+.spinner .ball:nth-child(4){
+  animation-delay: 720ms;
+}
+.spinner .ball:nth-child(5){
+  animation-delay: 960ms;
+} 
+    </style>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Spinner</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="spinner">
+      <div class="ball"></div>
+      <div class="ball"></div>
+      <div class="ball"></div>
+      <div class="ball"></div>
+      <div class="ball"></div>
+  </div>
+  <h3>Loading... </h3>
+</body>
+  </html>
