diff --git a/Components/Loaders/Terminal-Loader/index.html b/Components/Loaders/Terminal-Loader/index.html new file mode 100644 index 00000000..7cbf3296 --- /dev/null +++ b/Components/Loaders/Terminal-Loader/index.html @@ -0,0 +1,32 @@ + + + + + + + + + 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..21cfd6c4 --- /dev/null +++ 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 index c1857241..8ec69165 100644 --- a/assets/html_files/loaders.html +++ b/assets/html_files/loaders.html @@ -431,6 +431,19 @@

Square Loader

+
+

Terminal Loader

+
+ + + +
+
+ + + +
+

Triangle Loader