Loading tiles added

pulkit-30 · Oct 11, 2021 · 4038223 · 4038223
1 parent 49bb23e
commit 4038223
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/Loading Tiles Animation/index.html b/Loading Tiles 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">
+    <link rel="stylesheet" href="styles.css">
+
+    <title>Loading Tiles</title>
+</head>
+<body>
+		<div class="container">
+			<div class="box box1"></div>
+			<div class="box box2"></div>
+			<div class="box box3"></div>
+			<div class="box box4"></div>
+		</div>
+
+        <h2>CSS LOADER TILES</h2>
+</body>
diff --git a/Loading Tiles Animation/styles.css b/Loading Tiles Animation/styles.css
@@ -0,0 +1,31 @@
+body{
+	background-color: #000000;
+}
+
+.container{
+	width: 120px;
+	margin: 200px auto;
+    margin-bottom: 100px;
+}
+
+.box{
+	width: 50px;
+	height: 50px;
+	background-color: #14d6b6;
+	display: inline-block;
+	animation: pulse 0.6s ease-in infinite alternate;
+}
+.box2, .box3{
+	animation-delay: 0.6s;
+}
+
+@Keyframes pulse{
+	100%{
+		opacity: 0;
+	}
+}
+h2{
+    color: #14d6b6;
+    font-style: italic;
+    text-align: center;
+}