Loading Page Animation (#2401)

* Create index.html * Add files via upload * Update include.js * Delete Art/SaumyaKumar-09/Animation 4/Gif4.mp4 * Add files via upload * Update include.js
zero-to-mastery · Oct 31, 2023 · 75b483a · 75b483a
1 parent 1751f7c
commit 75b483a
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 0 deletions.
diff --git a/Art/SaumyaKumar-09/Animation 4/Animation4.gif b/Art/SaumyaKumar-09/Animation 4/Animation4.gif
diff --git a/Art/SaumyaKumar-09/Animation 4/index.html b/Art/SaumyaKumar-09/Animation 4/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Loading Page - Animation</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <div class="loading">
+            <span>Loading...</span>
+        </div>
+    </body>
+</html>
diff --git a/Art/SaumyaKumar-09/Animation 4/styles.css b/Art/SaumyaKumar-09/Animation 4/styles.css
@@ -0,0 +1,64 @@
+body {
+    margin: 0px;
+    padding: 0px;
+    background: #34495e;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "montserrat",sans-serif;
+}
+
+.loading {
+    width: 200px;
+    height: 200px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    border-top: 10px solid #e74c3c;
+    position: relative;
+    animation: a1 2s linear infinite;
+}
+
+.loading::before,
+.loading::after {
+    content: '';
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    left: 0px;
+    top: -10px;
+    box-sizing: border-box;
+    border-radius: 50%;
+}
+
+.loading::before{
+    border-top: 10px solid #e67e22;
+    transform: rotate(120deg);
+}
+
+.loading::after{
+    border-top: 10px solid #3498db;
+    transform: rotate(240deg);
+}
+
+.loading span {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    color: #fff;
+    text-align: center;
+    line-height: 200px;
+    animation: a2 2s linear infinite;
+}
+
+@keyframes a1 {
+    to{
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes a2 {
+    to{
+        transform: rotate(-360deg);
+    }
+}
diff --git a/include.js b/include.js
@@ -6,6 +6,13 @@ let cards = [
     author: 'stormworm9',
     githubLink: 'https://github.com/stormworm9'
   },
+  {
+    artName: 'Loading Page',
+    pageLink: './Art/SaumyaKumar-09/Animation%204/index.html',
+    imageLink: './Art/SaumyaKumar-09/Animation%204/Animation4.gif',
+    author: 'SaumyaKumar-09',
+    githubLink: 'https://github.com/SaumyaKumar-09'
+  },
   {
     artName: 'Elevator Ride',
     pageLink: './Art/deverestHood/index.html',