Merge pull request #191 from kiruba-r11/feature-1

Added Loading Animation
Ayush7614 · Jul 10, 2021 · 495425f · 495425f
2 parents d7d9fba + 369eaae
commit 495425f
Show file tree

Hide file tree

Showing 27 changed files with 80 additions and 0 deletions.
diff --git a/.github/.DS_Store b/.github/.DS_Store
diff --git a/Brick Breakout Game/.DS_Store b/Brick Breakout Game/.DS_Store
diff --git a/Carousel/.DS_Store b/Carousel/.DS_Store
diff --git a/Color Flipper/.DS_Store b/Color Flipper/.DS_Store
diff --git a/Connect Four/.DS_Store b/Connect Four/.DS_Store
diff --git a/Drum-Kit/.DS_Store b/Drum-Kit/.DS_Store
diff --git a/Feature Card Component/.DS_Store b/Feature Card Component/.DS_Store
diff --git a/Find the word/.DS_Store b/Find the word/.DS_Store
diff --git a/Hangman/.DS_Store b/Hangman/.DS_Store
diff --git a/Loading Animation/index.html b/Loading Animation/index.html
@@ -0,0 +1,20 @@
+<!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">
+    <title>Loading Animation</title>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <div class="main-container">
+		<div class="rotate-container"></div>
+		<h1>Loading</h1>
+	</div>
+
+</body>
+</html>
diff --git a/Loading Animation/styles.css b/Loading Animation/styles.css
@@ -0,0 +1,54 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+	width: 100vw;
+    background-color: black;
+}
+
+.main-container {
+	position: relative;
+}
+
+.rotate-container {
+	width: 150px;
+	height: 150px;
+	border-radius: 50%;
+	border-right: 4px solid white;
+	animation: rot 2s linear infinite;  
+}
+h1 {
+	position: absolute;
+	color: white;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50% , -50%);
+	font-size: 1.5rem;
+	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+	letter-spacing: 2px;
+	font-weight: 400;
+}
+
+@keyframes rot {
+	0% {
+
+	}
+	25% {
+		transform: rotate(90deg);
+	}
+	50% {
+		transform: rotate(180deg);
+	}
+	75% {
+		transform: rotate(270deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
diff --git a/Memory Game/.DS_Store b/Memory Game/.DS_Store
diff --git a/Minesweeper Game/.DS_Store b/Minesweeper Game/.DS_Store
diff --git a/Music-player/.DS_Store b/Music-player/.DS_Store
diff --git a/Pricing Card/.DS_Store b/Pricing Card/.DS_Store
diff --git a/Profile Card View/.DS_Store b/Profile Card View/.DS_Store
diff --git a/Project-Website/.DS_Store b/Project-Website/.DS_Store
diff --git a/README.md b/README.md
@@ -521,6 +521,12 @@ You can refer to the following articles on the basics of Git and Github and also
 
 <p align="center">
      <a href="https://github.com/Ayush7614"><img src="./Screenshots/piano.png" /></a>
+</p>
+
+### 77.Loading Animation
+
+<p align="center">
+     <a href="https://github.com/Ayush7614"><img src="./Screenshots/Loading Animation.gif" /></a>
  </p>
 
 ### 78. Shopping_Cart

diff --git a/Rock-Paper-Scissors game/.DS_Store b/Rock-Paper-Scissors game/.DS_Store
diff --git a/Screenshots/Loading Animation.gif b/Screenshots/Loading Animation.gif
diff --git a/Simple Chatroom/.DS_Store b/Simple Chatroom/.DS_Store
diff --git a/Social Media Dashboard/.DS_Store b/Social Media Dashboard/.DS_Store
diff --git a/Tic-Tac-Toe/.DS_Store b/Tic-Tac-Toe/.DS_Store
diff --git a/Vaccine Slot Finder/.DS_Store b/Vaccine Slot Finder/.DS_Store
diff --git a/Whack a mole game/.DS_Store b/Whack a mole game/.DS_Store
diff --git a/admin dashboard/.DS_Store b/admin dashboard/.DS_Store
diff --git a/flappybird/.DS_Store b/flappybird/.DS_Store