Loader by jeremyssocial

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  45%,
13  55% {
14    width: 6.2em;
15  } /* adjust width based on content */
16  90%,
17  100% {
18    width: 0;
19  }
20}
21
22.terminal-loader {
23  border: 0.1em solid #333;
24  background-color: #1a1a1a;
25  color: #0f0;
26  font-family: "Courier New", Courier, monospace;
27  font-size: 1em;
28  padding: 1.5em 1em;
29  width: 12em;
30  margin: 100px auto;
31  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
32  border-radius: 4px;
33  position: relative;
34  overflow: hidden;
35  box-sizing: border-box;
36}
37
38.terminal-header {
39  position: absolute;
40  top: 0;
41  left: 0;
42  right: 0;
43  height: 1.5em;
44  background-color: #333;
45  border-top-left-radius: 4px;
46  border-top-right-radius: 4px;
47  padding: 0 0.4em;
48  box-sizing: border-box;
49}
50
51.terminal-controls {
52  float: right;
53}
54
55.control {
56  display: inline-block;
57  width: 0.6em;
58  height: 0.6em;
59  margin-left: 0.4em;
60  border-radius: 50%;
61  background-color: #777;
62}
63
64.control.close {
65  background-color: #e33;
66}
67
68.control.minimize {
69  background-color: #ee0;
70}
71
72.control.maximize {
73  background-color: #0b0;
74}
75
76.terminal-title {
77  float: left;
78  line-height: 1.5em;
79  color: #eee;
80}
81
82.text {
83  display: inline-block;
84  white-space: nowrap;
85  overflow: hidden;
86  border-right: 0.2em solid green; /* Cursor */
87  animation: typeAndDelete 4s steps(11) infinite,
88    blinkCursor 0.5s step-end infinite alternate;
89  margin-top: 1.5em;
90}
91