Added wheel loading animation

pulkit-30 · Oct 11, 2021 · 2694d80 · 2694d80
1 parent 49bb23e
commit 2694d80
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 0 deletions.
diff --git a/Balance-Wheel Loading/README.md b/Balance-Wheel Loading/README.md
diff --git a/Balance-Wheel Loading/img.png b/Balance-Wheel Loading/img.png
diff --git a/Balance-Wheel Loading/index.html b/Balance-Wheel Loading/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css" />
+    <title>Wheel pre-loader</title>
+</head>
+<body>
+    <div class="pre-loader"></div>
+</body>
+<footer class="foot" >
+    Made by: <a href="https://github.com/Sneakad" class="name">Aditya Mondal</a> <br>
+    Date: 10-10-2021
+</footer>
+</html>
diff --git a/Balance-Wheel Loading/style.css b/Balance-Wheel Loading/style.css
@@ -0,0 +1,52 @@
+body {
+  background: #fefae0;
+}
+.pre-loader {
+  width: 150px;
+  height: 50px;
+  margin: 100px auto 0;
+  border-bottom: 4px solid #0c8b00;
+  position: relative;
+  animation: animate 3s infinite linear;
+}
+.pre-loader:before {
+  content: "";
+  background: #fb5000;
+  width: 40px;
+  height: 45px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  clip-path: circle(40%);
+  animation: animate1 3s infinite linear;
+}
+@keyframes animate {
+  0%,
+  100% {
+    transform: rotate(-20deg);
+  }
+  50% {
+    transform: rotate(20deg);
+  }
+}
+@keyframes animate1 {
+  0%,
+  100% {
+    transform: rotate(0);
+    left: 0;
+  }
+  50% {
+    transform: rotate(200deg);
+    left: calc(100% - 40px);
+  }
+}
+.foot {
+  margin: auto;
+  margin-top: 40vh;
+  color: rgb(0, 109, 211);
+  text-align: center;
+}
+.name {
+  color: #0071f1;
+}