Merge pull request #1802 from zero-to-mastery/makrenko-dev-loader_a

Makrenko dev loader a
zero-to-mastery · Oct 2, 2023 · eaa5b75 · eaa5b75
2 parents 0654eed + 2078140
commit eaa5b75
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 0 deletions.
diff --git a/Art/Animation_makrenko-dev/index.html b/Art/Animation_makrenko-dev/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Animation for AN</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="loader-container">
+      <div class="loader-3">
+        <div class="item-1"></div>
+        <div class="item-2"></div>
+        <div class="item-3"></div>
+        <div class="item-4"></div>
+        <div class="item-5"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Art/Animation_makrenko-dev/logo.png b/Art/Animation_makrenko-dev/logo.png
diff --git a/Art/Animation_makrenko-dev/logog.gif b/Art/Animation_makrenko-dev/logog.gif
diff --git a/Art/Animation_makrenko-dev/style.css b/Art/Animation_makrenko-dev/style.css
@@ -0,0 +1,65 @@
+body {
+  background-color: #94e5ff;
+  margin: 20px;
+}
+.loader-container {
+  position: relative;
+  width: 400px;
+  height: 400px;
+  display: inline-block;
+  text-align: center;
+  border: 1px solid #000000;
+  vertical-align: middle;
+}
+.loader-3 {
+  width: 300px;
+  height: 300px;
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  margin: 0 auto 0;
+  text-align: center;
+}
+.loader-3 div {
+  background-color: #ffffff;
+  height: 100%;
+  width: 30px;
+  border: 1px solid #000000;
+  display: inline-block;
+  -webkit-animation: loader-3 1.2s infinite ease-in-out;
+  animation: loader-3 1.2s infinite ease-in-out;
+}
+
+@keyframes loader-3 {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+  }
+  20% {
+    transform: scaleY(1);
+    -webkit-transform: scaleY(1);
+  }
+}
+
+.loader-3 .item-2 {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+
+.loader-3 .item-3 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+
+.loader-3 .item-4 {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+
+.loader-3 .item-5 {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
diff --git a/include.js b/include.js
@@ -47,6 +47,13 @@ let cards = [
     imageLink: './Art/CDay87/Bounce_Animation.gif',
     author: 'CDay-87',
     githubLink: 'https://github.com/CDay-87'
+  },
+  {
+    artName: 'Loader',
+    pageLink: './Art/Animation_makrenko-dev/index.html',
+    imageLink: './Art/Animation_makrenko-dev/logog.gif',
+    author: 'makrenko-dev',
+    githubLink: 'https://github.com/makrenko-dev'
   }
 ];