Loader by JkHuger

1@keyframes typing {
2  from {
3    width: 0;
4  }
5}
6
7@keyframes blink-caret {
8  50% {
9    border-color: transparent;
10  }
11}
12/* When you change the amount of characters in the h1, you have to change 
13the with: 14ch and  steps(14, end), if there is 14 characters, put 14, 
14if there is 20 put 20 */
15.animation {
16  font: bold 200% Consolas, Monaco, monospace;
17  border-right: .1em solid black;
18  width: 13.20ch;
19  margin: 2em 2em;
20  white-space: nowrap;
21  overflow: hidden;
22  -webkit-animation: typing 5s steps(13, end),
23	           blink-caret .5s step-end infinite alternate;
24}