Loader by Chriskoziol
#e8e8e8
1.spinnerContainer { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5} 6 7.spinner { 8 width: 56px; 9 height: 56px; 10 display: grid; 11 border: 4px solid #0000; 12 border-radius: 50%; 13 border-right-color: #299fff; 14 animation: tri-spinner 1s infinite linear; 15} 16 17.spinner::before, 18.spinner::after { 19 content: ""; 20 grid-area: 1/1; 21 margin: 2px; 22 border: inherit; 23 border-radius: 50%; 24 animation: tri-spinner 2s infinite; 25} 26 27.spinner::after { 28 margin: 8px; 29 animation-duration: 3s; 30} 31 32@keyframes tri-spinner { 33 100% { 34 transform: rotate(1turn); 35 } 36} 37 38.loader { 39 color: #4a4a4a; 40 font-family: "Poppins",sans-serif; 41 font-weight: 500; 42 font-size: 25px; 43 -webkit-box-sizing: content-box; 44 box-sizing: content-box; 45 height: 40px; 46 padding: 10px 10px; 47 display: -webkit-box; 48 display: -ms-flexbox; 49 display: flex; 50 border-radius: 8px; 51} 52 53.words { 54 overflow: hidden; 55} 56 57.word { 58 display: block; 59 height: 100%; 60 padding-left: 6px; 61 color: #299fff; 62 animation: cycle-words 5s infinite; 63} 64 65@keyframes cycle-words { 66 10% { 67 -webkit-transform: translateY(-105%); 68 transform: translateY(-105%); 69 } 70 71 25% { 72 -webkit-transform: translateY(-100%); 73 transform: translateY(-100%); 74 } 75 76 35% { 77 -webkit-transform: translateY(-205%); 78 transform: translateY(-205%); 79 } 80 81 50% { 82 -webkit-transform: translateY(-200%); 83 transform: translateY(-200%); 84 } 85 86 60% { 87 -webkit-transform: translateY(-305%); 88 transform: translateY(-305%); 89 } 90 91 75% { 92 -webkit-transform: translateY(-300%); 93 transform: translateY(-300%); 94 } 95 96 85% { 97 -webkit-transform: translateY(-405%); 98 transform: translateY(-405%); 99 } 100 101 100% { 102 -webkit-transform: translateY(-400%); 103 transform: translateY(-400%); 104 } 105} 106
2.5K views
2.5K views
MIT License