Loader by vikas7754
#e8e8e8
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
670 views
Variation of aloader
MIT License