Added Terminal Loader (#882)

Rakesh9100 · Jun 7, 2024 · d8fb6a4 · d8fb6a4
1 parent 06d6321
commit d8fb6a4
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 0 deletions.
diff --git a/Components/Loaders/Terminal-Loader/index.html b/Components/Loaders/Terminal-Loader/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>Terminal Loader</title>
+</head>
+
+<body>
+    <div class="mx-auto w-[500px] mt-9 bg-gray-950 rounded-xl overflow-hidden drop-shadow-xl">
+        <div class="bg-[#333] flex items-center p-[5px] text-whitec relative">
+            <div class="flex absolute left-3">
+                <span class="h-3.5 w-3.5 bg-[#ff605c] rounded-xl mr-2"></span>
+                <span class="h-3.5 w-3.5 bg-[#ffbd44] rounded-xl mr-2"></span>
+                <span class="h-3.5 w-3.5 bg-[#00ca4e] rounded-xl"></span>
+            </div>
+            <div class="flex-1 text-center text-white">status</div>
+        </div>
+        <div class="p-2.5 text-[#0f0]">
+            <div>
+                <span class="mr-2">Loading</span>
+                <span class="animate-[ping_1.5s_0.5s_ease-in-out_infinite]">.</span>
+                <span class="animate-[ping_1.5s_0.7s_ease-in-out_infinite]">.</span>
+                <span class="animate-[ping_1.5s_0.9s_ease-in-out_infinite]">.</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Components/Loaders/Terminal-Loader/style.css b/Components/Loaders/Terminal-Loader/style.css
@@ -0,0 +1,90 @@
+.container {
+    margin: auto;
+    width: 500px;
+    background-color: #2d2d2d;
+    border-radius: 1rem;
+    overflow: hidden;
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.status-bar {
+    background-color: #333;
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    color: white;
+    position: relative;
+}
+
+.status-indicators {
+    position: absolute;
+    left: 10px;
+}
+
+.indicator {
+    height: 7px;
+    width: 7px;
+    border-radius: 50%;
+    margin-right: 5px;
+}
+
+.indicator-red {
+    background-color: #ff605c;
+}
+
+.indicator-yellow {
+    background-color: #ffbd44;
+}
+
+.indicator-green {
+    background-color: #00ca4e;
+}
+
+.status-text {
+    flex: 1;
+    text-align: center;
+}
+
+.loading-text {
+    padding: 10px;
+    color: #0f0;
+}
+
+.loading {
+    margin-right: 5px;
+}
+
+.dot {
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    margin: 0 2px;
+    animation: ping 1.5s infinite ease-in-out;
+}
+
+.dot-1 {
+    animation-delay: 0.5s;
+}
+
+.dot-2 {
+    animation-delay: 0.7s;
+}
+
+.dot-3 {
+    animation-delay: 0.9s;
+}
+
+@keyframes ping {
+    0% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
diff --git a/assets/html_files/loaders.html b/assets/html_files/loaders.html
@@ -431,6 +431,19 @@ <h1>Square Loader</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Terminal Loader</h1>
+                <div class="preview">
+                    <a href="../../Components/Loaders/Terminal-Loader/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Loaders/Terminal-Loader" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Triangle Loader</h1>
                 <div class="preview">