Merge pull request #2876 from shanolhere/shanolhere-loaderAnimation

Loader animation
zero-to-mastery · Oct 31, 2024 · dffb428 · dffb428
2 parents 3df23cc + 9c2c88f
commit dffb428
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 72 deletions.
diff --git a/Art/shanolhere-dogAnimation/styles.css b/Art/shanolhere-dogAnimation/styles.css
@@ -1,117 +1,115 @@
+
 body {
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background-color: #f0f0f0;
-  overflow: hidden;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+    overflow: hidden;
 }
 
 .dog {
-  position: relative;
-  width: 120px;
-  height: 120px;
+    position: relative;
+    width: 120px;
+    height: 120px;
 }
 
 /* Dog Body */
 .body {
-  width: 70px;
-  height: 50px;
-  background-color: #b5651d;
-  border-radius: 50%;
-  position: absolute;
-  top: 30px;
-  left: 25px;
+    width: 70px;
+    height: 50px;
+    background-color: #b5651d;
+    border-radius: 50%;
+    position: absolute;
+    top: 30px;
+    left: 25px;
 }
 
 /* Dog Head */
 .head {
-  width: 60px;
-  height: 60px;
-  background-color: #b5651d;
-  border-radius: 50%;
-  position: absolute;
-  top: 0;
-  left: 30px;
+    width: 60px;
+    height: 60px;
+    background-color: #b5651d;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 30px;
 }
 
 /* Dog Ears */
-.ear-left,
-.ear-right {
-  width: 20px;
-  height: 30px;
-  background-color: #b5651d;
-  position: absolute;
-  top: 0;
-  border-radius: 50%;
+.ear-left, .ear-right {
+    width: 20px;
+    height: 30px;
+    background-color: #b5651d;
+    position: absolute;
+    top: 0;
+    border-radius: 50%;
 }
 .ear-left {
-  left: 5px;
-  transform: rotate(-30deg);
+    left: 5px;
+    transform: rotate(-30deg);
 }
 .ear-right {
-  right: 5px;
-  transform: rotate(30deg);
+    right: 5px;
+    transform: rotate(30deg);
 }
 
 /* Dog Eyes */
-.eye-left,
-.eye-right {
-  width: 10px;
-  height: 10px;
-  background-color: #fff;
-  border-radius: 50%;
-  position: absolute;
-  top: 20px;
+.eye-left, .eye-right {
+    width: 10px;
+    height: 10px;
+    background-color: #fff;
+    border-radius: 50%;
+    position: absolute;
+    top: 20px;
 }
 .eye-left {
-  left: 15px;
+    left: 15px;
 }
 .eye-right {
-  right: 15px;
+    right: 15px;
 }
 
 /* Dog Nose */
 .nose {
-  width: 12px;
-  height: 12px;
-  background-color: #333;
-  border-radius: 50%;
-  position: absolute;
-  top: 35px;
-  left: 50%;
-  transform: translateX(-50%);
+    width: 12px;
+    height: 12px;
+    background-color: #333;
+    border-radius: 50%;
+    position: absolute;
+    top: 35px;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
+
 /* Dog Legs */
-.leg-left,
-.leg-right {
-  width: 10px;
-  height: 30px;
-  background-color: #b5651d;
-  position: absolute;
-  top: 70px;
-  border-radius: 5px;
+.leg-left, .leg-right {
+    width: 10px;
+    height: 30px;
+    background-color: #b5651d;
+    position: absolute;
+    top: 70px;
+    border-radius: 5px;
 }
 .leg-left {
-  left: 10px;
+    left: 10px;
 }
 .leg-right {
-  right: 10px;
+    right: 10px;
 }
 
 /* Animation for walking */
 @keyframes walk {
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-  50% {
-    transform: translateX(300px);
-  }
+    0%, 100% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(300px);
+    }
 }
 
 .dog {
-  animation: walk 4s ease-in-out infinite;
+    animation: walk 4s ease-in-out infinite;
 }
diff --git a/Art/shanolhere-loaderAnimation/index.html b/Art/shanolhere-loaderAnimation/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Loader Animation</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="loader">
+        <div class="dot"></div>
+        <div class="dot"></div>
+        <div class="dot"></div>
+    </div>
+</body>
+</html>
diff --git a/Art/shanolhere-loaderAnimation/meta.json b/Art/shanolhere-loaderAnimation/meta.json
@@ -0,0 +1,4 @@
+{
+    "artName": "Loader Animation",
+    "githubHandle": "shanolhere"
+}
diff --git a/Art/shanolhere-loaderAnimation/styles.css b/Art/shanolhere-loaderAnimation/styles.css
@@ -0,0 +1,36 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+    margin: 0;
+}
+
+.loader {
+    display: flex;
+    align-items: flex-end;
+}
+
+.dot {
+    width: 15px;
+    height: 15px;
+    margin: 0 5px;
+    background-color: #3498db;
+    border-radius: 50%;
+    animation: bounce 0.6s infinite alternate;
+}
+
+.dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+    to {
+        transform: translateY(-20px);
+    }
+}