Added kinetic_loading art for graphics (#2394)

* Added kinetic_loading art for graphics Added kinetic_loading art for graphics using HTML and CSS styles. * Delete Art/Urja directory * Add files via upload * Update include.js * fix syntax error in include.js --------- Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Oct 30, 2023 · 648cc38 · 648cc38
1 parent 44392a5
commit 648cc38
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 0 deletions.
diff --git a/Art/urjabahad/kinetic_loading.gif b/Art/urjabahad/kinetic_loading.gif
diff --git a/Art/urjabahad/kinetic_loading.html b/Art/urjabahad/kinetic_loading.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KineticLoading</title>
+</head>
+<body>
+    <style>
+        *{
+            margin: 0;
+            box-sizing: border-box;
+        }
+        body{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background-color: #2c3e50;
+            overflow: hidden;
+        }
+        .kinetic{
+            position: relative;
+            height:80px;
+            width:80px
+        }
+        .kinetic::after, .kinetic::before
+        {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 0;
+            width: 0;
+            border: 50px solid transparent;
+            border-bottom-color: #fff;
+            animation: rotA 2s linear infinite 0.5s;
+        }
+        @keyframes rotA{
+            0%,25%{
+                transform: rotate(0deg);
+            }
+            50%,75%{
+                transform: rotate(180deg);
+            }
+            100%{
+                transform: rotate(360deg);
+            }
+        }
+        .kinetic::before{
+            transform: rotate(90deg);
+             animation: rotB 2s linear infinite;
+             border-bottom-color: crimson;
+        }
+        @keyframes rotB{
+            0%,25%{
+                transform: rotate(90deg);
+            }
+            50%,75%{
+                transform: rotate(270deg);
+            }
+            100%{
+                transform: rotate(450deg);
+            }
+        }
+    </style>
+    <div class="kinetic"></div>
+</body>
+</html>
diff --git a/include.js b/include.js
@@ -2711,6 +2711,13 @@ let cards = [
     author: 'Piyush_Luitel',
     githubLink: 'https://github.com/PiyushLuitel-07'
   }
+  ,{
+    artName: 'Kinetic Loading',
+    pageLink: './Art/urjabahad/kinetic_loading.html', 
+    imageLink: './Art/urjabahad/kinetic_loading.gif', 
+    author: 'Urja', 
+    githubLink: 'https://github.com/urjabahad'
+  }
 ];
 
 /* -------------------------------------------------------------------------- */