From 027972e876e410888016b321445078080256089d Mon Sep 17 00:00:00 2001
From: vikasmaurya <83597577+Vikasmaury@users.noreply.github.com>
Date: Wed, 27 Oct 2021 06:54:01 -0700
Subject: [PATCH] Loading Effect

---
 Hactoberfest2020/Loading Effect | 78 +++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 Hactoberfest2020/Loading Effect
diff --git a/Hactoberfest2020/Loading Effect b/Hactoberfest2020/Loading Effect
new file mode 100644
index 0000000..43ab74b
--- /dev/null
+++ b/Hactoberfest2020/Loading Effect	
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Loading  </title>
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
+<style>
+*{
+margin:0px;
+padding:0px;
+box-sizing:border-box;
+font-family: *Fredoke One*,cursive;
+}
+
+html{ 
+font-size: 88%;
+}
+.main-div{
+width:100vw;
+height:100vh;
+background-color:#000;
+display:grid;
+place-items:center;
+
+}
+.center_div{
+width: 15rem;
+height: 15rem;
+position:relative;
+
+}
+
+.rot{
+width: 15rem;
+height: 15rem;
+position: absolute;
+border-right: 0.3rem solid #fff;
+border-radius: 50%;
+animation: rot 2s linear infinite;
+
+
+}
+
+@keyframes rot  {
+0%{
+   transform: rotate(0deg);
+   
+   }
+100%{
+   transform: rotate(360deg);
+   
+   }
+}
+
+h1{
+position: absolute;
+top: 50%;
+left:50%;
+transform: translate(-50%, -50%);
+color:#fff;
+
+}
+</style>
+</head>
+<body>
+
+<div class="main-div">
+     <div class="center_div"> 
+	 <div class="rot"> </div>
+	 <h1>loading </h1>
+	</div>
+  </div>
+
+
+</body>
+</html>
