From 7278d23ce795a68d1761fc4963de6860cbae986f Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Mon, 3 Jun 2024 23:27:14 +0530 Subject: [PATCH 1/3] added terminal loader --- Components/Loaders/Terminal-Loader/index.html | 31 + Components/Loaders/Terminal-Loader/style.css | 88 ++ assets/html_files/loaders.html | 1221 ++++++++++------- 3 files changed, 872 insertions(+), 468 deletions(-) create mode 100644 Components/Loaders/Terminal-Loader/index.html create mode 100644 Components/Loaders/Terminal-Loader/style.css diff --git a/Components/Loaders/Terminal-Loader/index.html b/Components/Loaders/Terminal-Loader/index.html new file mode 100644 index 00000000..def04694 --- /dev/null +++ b/Components/Loaders/Terminal-Loader/index.html @@ -0,0 +1,31 @@ + + + + + + Terminal Loader + + + +
+
+
+ + + +
+
status
+
+
+
+ Loading + . + . + . +
+
+
+ + diff --git a/Components/Loaders/Terminal-Loader/style.css b/Components/Loaders/Terminal-Loader/style.css new file mode 100644 index 00000000..27913b11 --- /dev/null +++ b/Components/Loaders/Terminal-Loader/style.css @@ -0,0 +1,88 @@ +.container { + margin: auto; + width: 500px; + background-color: #2d2d2d; /* Adjust to match bg-gray-950 */ + border-radius: 1rem; + overflow: hidden; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); /* Similar to drop-shadow-xl */ +} + +.status-bar { + background-color: #333; + display: flex; + align-items: center; + padding: 5px; + color: white; + position: relative; +} + +.status-indicators { + position: absolute; + left: 10px; /* Adjust to match left-3 */ +} + +.indicator { + height: 7px; /* Adjust to match h-3.5 */ + width: 7px; /* Adjust to match w-3.5 */ + border-radius: 50%; + margin-right: 5px; /* Adjust to match mr-2 */ +} + +.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; /* Adjust to match p-2.5 */ + color: #0f0; +} + +.loading { + margin-right: 5px; /* Adjust to match mr-2 */ +} + +.dot { + display: inline-block; + width: 5px; /* Adjust size as needed */ + height: 5px; /* Adjust size as needed */ + border-radius: 50%; + margin: 0 2px; /* Adjust spacing as needed */ + 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 index ead80d31..7a0888f9 100644 --- a/assets/html_files/loaders.html +++ b/assets/html_files/loaders.html @@ -1,479 +1,764 @@ + + + + + + + + + + + + Beautiify | Loaders + - - - - - - - - - - - - Beautiify | Loaders - + +
+
+
+
+
- -
-
-
-
-
+
+ -
+
+
Loaders
+ + +
+
+

Bird Loader

+
+ + + +
+
+ + + +
+
+
+

Box Loader

+
+ + + +
+
+ + + +
+
+
+

Clock Loader

+
+ + + +
+
+ + + +
+
+
+

Colour Changing Loader

+
+ + + +
+
+ + + +
+
+
+

Cup Loader

+
+ + + +
+
+ + + +
+
+
+

Customizable Percentage Loader

+
+ + + +
+
+ + + +
+
+
+

Flipping Text Loader

+
+ + + +
+
+ + + +
+
+
+

Frosted Glass Loader

+
+ + + +
+
+ + + +
+
+
+

Gear Loader

+
+ + + +
+
+ + + +
+
+
+

Glassmorphism Loader

+
+ + + +
+
+ + + +
+
+
+

Gradient Stroke Bounce Loader

+
+ + + +
+
+ + + +
+
+
+

Helix Loader

+
+ + + +
+
+ + + +
+
+
+

Hexagonal Ripple Loader

+
+ + + +
+
+ + + +
+
+
+

Hourglass Loader

+
+ + + +
+
+ + + +
+
+
+

Infinity Loader

+
+ + + +
+
+ + + +
+
+
+

Maze Loader

+
+ + + +
+
+ + + +
+
+
+

Mouse On Wheel Loader

+
+ + + +
+
+ + + +
+
+
+

Newton Cradle Loader

+
+ + + +
+
+ + + +
+
+
+

Pendulum Loader

+
+ + + +
+
+ + + +
+
+
+

Polygon Loader

+
+ + + +
+
+ + + +
+
+
+

Reveal Loader

+
+ + + +
+
+ + + +
+
+
+

Rippling Neumorphism Loader

+
+ + + +
+
+ + + +
+
+
+

Rotating Circle Loader

+
+ + + +
+
+ + + +
+
+
+

Rotating Squares Loader

+
+ + + +
+
+ + + +
+
+
+

Round Squares Loader

+
+ + + +
+
+ + + +
+
+
+

Spinning Loader

+
+ + + +
+
+ + + +
+
+
+

Square Grid Loader

+
+ + + +
+
+ + + +
+
+
+

Square Loader

+
+ + + +
+
+ + + +
+
+
+

Terminal Loader

+
+ + + +
+
+ + + +
+
+
+

Triangle Loader

+
+ + + +
+
+ + + +
+
+
+

Wifi Loader

+
+ + + +
+
+ + + +
+
+
+
-
+ -
Loaders
- - -
-
-

Bird Loader

-
- - - -
-
- - - -
-
-
-

Box Loader

-
- - - -
-
- - - -
-
-
-

Clock Loader

-
- - - -
-
- - - -
-
-
-

Colour Changing Loader

-
- - - -
-
- - - -
-
-
-

Cup Loader

-
- - - -
-
- - - -
-
-
-

Customizable Percentage Loader

-
- - - -
-
- - - -
-
-
-

Flipping Text Loader

-
- - - -
-
- - - -
-
-
-

Frosted Glass Loader

-
- - - -
-
- - - -
-
-
-

Gear Loader

-
- - - -
-
- - - -
-
-
-

Glassmorphism Loader

-
- - - -
-
- - - -
-
-
-

Gradient Stroke Bounce Loader

-
- - - -
-
- - - -
-
-
-

Helix Loader

-
- - - -
-
- - - -
-
-
-

Hexagonal Ripple Loader

-
- - - -
-
- - - -
-
-
-

Hourglass Loader

-
- - - -
-
- - - -
-
-
-

Infinity Loader

-
- - - -
-
- - - -
-
-
-

Maze Loader

-
- - - -
-
- - - -
-
-
-

Mouse On Wheel Loader

-
- - - -
-
- - - -
-
-
-

Newton Cradle Loader

-
- - - -
-
- - - -
-
-
-

Pendulum Loader

-
- - - -
-
- - - -
-
-
-

Polygon Loader

-
- - - -
-
- - - -
-
-
-

Reveal Loader

-
- - - -
-
- - - -
-
-
-

Rippling Neumorphism Loader

-
- - - -
-
- - - -
-
-
-

Rotating Circle Loader

-
- - - -
-
- - - -
-
-
-

Rotating Squares Loader

-
- - - -
-
- - - -
-
-
-

Round Squares Loader

-
- - - -
-
- - - -
-
-
-

Spinning Loader

-
- - - -
-
- - - -
-
-
-

Square Grid Loader

-
- - - -
-
- - - -
-
-
-

Square Loader

-
- - - -
-
- - - -
-
-
-

Triangle Loader

-
- - - -
-
- - - -
-
-
-

Wifi Loader

-
- - - -
-
- - - -
-
-
-
+ - - - - - -
- 🠕 -
- - - - - + +
+ 🠕 +
+ + + From e734f227f40430a6e18f42a7436b54287934ad42 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 7 Jun 2024 23:37:07 +0530 Subject: [PATCH 2/3] Update index.html --- Components/Loaders/Terminal-Loader/index.html | 57 ++++++++++--------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/Components/Loaders/Terminal-Loader/index.html b/Components/Loaders/Terminal-Loader/index.html index def04694..7cbf3296 100644 --- a/Components/Loaders/Terminal-Loader/index.html +++ b/Components/Loaders/Terminal-Loader/index.html @@ -1,31 +1,32 @@ - - - - Terminal Loader - - - -
-
-
- - - -
-
status
-
-
-
- Loading - . - . - . -
-
-
- + + + + + + + Terminal Loader + + + +
+
+
+ + + +
+
status
+
+
+
+ Loading + . + . + . +
+
+
+ From c26023e00b600adf15c10799d0dab12db9f24d30 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 7 Jun 2024 23:38:14 +0530 Subject: [PATCH 3/3] Update style.css --- Components/Loaders/Terminal-Loader/style.css | 90 ++++++++++---------- 1 file changed, 46 insertions(+), 44 deletions(-) diff --git a/Components/Loaders/Terminal-Loader/style.css b/Components/Loaders/Terminal-Loader/style.css index 27913b11..21cfd6c4 100644 --- a/Components/Loaders/Terminal-Loader/style.css +++ b/Components/Loaders/Terminal-Loader/style.css @@ -1,88 +1,90 @@ .container { - margin: auto; - width: 500px; - background-color: #2d2d2d; /* Adjust to match bg-gray-950 */ - border-radius: 1rem; - overflow: hidden; - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); /* Similar to drop-shadow-xl */ + 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; + background-color: #333; + display: flex; + align-items: center; + padding: 5px; + color: white; + position: relative; } .status-indicators { - position: absolute; - left: 10px; /* Adjust to match left-3 */ + position: absolute; + left: 10px; } .indicator { - height: 7px; /* Adjust to match h-3.5 */ - width: 7px; /* Adjust to match w-3.5 */ - border-radius: 50%; - margin-right: 5px; /* Adjust to match mr-2 */ + height: 7px; + width: 7px; + border-radius: 50%; + margin-right: 5px; } .indicator-red { - background-color: #ff605c; + background-color: #ff605c; } .indicator-yellow { - background-color: #ffbd44; + background-color: #ffbd44; } .indicator-green { - background-color: #00ca4e; + background-color: #00ca4e; } .status-text { - flex: 1; - text-align: center; + flex: 1; + text-align: center; } .loading-text { - padding: 10px; /* Adjust to match p-2.5 */ - color: #0f0; + padding: 10px; + color: #0f0; } .loading { - margin-right: 5px; /* Adjust to match mr-2 */ + margin-right: 5px; } .dot { - display: inline-block; - width: 5px; /* Adjust size as needed */ - height: 5px; /* Adjust size as needed */ - border-radius: 50%; - margin: 0 2px; /* Adjust spacing as needed */ - animation: ping 1.5s infinite ease-in-out; + 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; + animation-delay: 0.5s; } .dot-2 { - animation-delay: 0.7s; + animation-delay: 0.7s; } .dot-3 { - animation-delay: 0.9s; + animation-delay: 0.9s; } @keyframes ping { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } + 0% { + opacity: 0; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0; + } }