Loader by vikas7754

1@keyframes blinkCursor {
2  50% {
3    border-right-color: transparent;
4  }
5}
6
7@keyframes typeAndDelete {
8  0%,
9  10% {
10    width: 0;
11  }
12
13  45%,
14  55% {
15    width: 5em;
16  }
17
18  90%,
19  100% {
20    width: 0;
21  }
22}
23
24.terminal-loader {
25  width: 100%;
26  max-width: 400px;
27  height: 200px;
28  background: #1c1c1c;
29  border: 1px solid #ffffff3e;
30  border-radius: 10px;
31  overflow: hidden;
32  margin: 20px;
33  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
34}
35
36.terminal-header {
37  position: relative;
38  display: flex;
39  align-items: center;
40  justify-content: center;
41  background-color: #343434;
42  padding: 6px;
43}
44
45.terminal-controls {
46  position: absolute;
47  left: 10px;
48  display: flex;
49  gap: 7px;
50}
51
52.control {
53  display: inline-block;
54  width: 15px;
55  height: 15px;
56  border-radius: 50%;
57  background-color: #777;
58}
59
60.control.close {
61  background-color: #e33;
62}
63
64.control.minimize {
65  background-color: #ee0;
66}
67
68.control.maximize {
69  background-color: #0b0;
70}
71
72.terminal-title {
73  color: #eeeeeec1;
74}
75
76.content {
77  padding: 10px;
78}
79.text {
80  display: inline-block;
81  white-space: nowrap;
82  overflow: hidden;
83  border-right: 2px solid green;
84  animation: typeAndDelete 4s steps(11) infinite,
85    blinkCursor 0.5s step-end infinite alternate;
86  color: rgb(0, 196, 0);
87  font-weight: 600;
88}
89