Loader by kennyotsu
#212121
1.card { 2 /* color used to softly clip top and bottom of the .words container */ 3 --bg-color: #212121; 4 background-color: var(--bg-color); 5 padding: 1rem 2rem; 6 border-radius: 1.25rem; 7} 8.loader { 9 color: rgb(124, 124, 124); 10 font-family: "Poppins", sans-serif; 11 font-weight: 500; 12 font-size: 25px; 13 -webkit-box-sizing: content-box; 14 box-sizing: content-box; 15 height: 40px; 16 padding: 10px 10px; 17 display: -webkit-box; 18 display: -ms-flexbox; 19 display: flex; 20 border-radius: 8px; 21} 22 23.words { 24 overflow: hidden; 25 position: relative; 26} 27.words::after { 28 content: ""; 29 position: absolute; 30 inset: 0; 31 background: linear-gradient( 32 var(--bg-color) 10%, 33 transparent 30%, 34 transparent 70%, 35 var(--bg-color) 90% 36 ); 37 z-index: 20; 38} 39 40.word { 41 display: block; 42 height: 100%; 43 padding-left: 6px; 44 color: #956afa; 45 animation: spin_4991 4s infinite; 46} 47 48@keyframes spin_4991 { 49 10% { 50 -webkit-transform: translateY(-102%); 51 transform: translateY(-102%); 52 } 53 54 25% { 55 -webkit-transform: translateY(-100%); 56 transform: translateY(-100%); 57 } 58 59 35% { 60 -webkit-transform: translateY(-202%); 61 transform: translateY(-202%); 62 } 63 64 50% { 65 -webkit-transform: translateY(-200%); 66 transform: translateY(-200%); 67 } 68 69 60% { 70 -webkit-transform: translateY(-302%); 71 transform: translateY(-302%); 72 } 73 74 75% { 75 -webkit-transform: translateY(-300%); 76 transform: translateY(-300%); 77 } 78 79 85% { 80 -webkit-transform: translateY(-402%); 81 transform: translateY(-402%); 82 } 83 84 100% { 85 -webkit-transform: translateY(-400%); 86 transform: translateY(-400%); 87 } 88} 89
3.7K views
3.7K views
MIT License