#e8e8e8
1/* From cssbuttons.io by @satyamchaudharydev */ 2.loader { 3 --loader: rgb(221, 65, 226); 4 --loader-size: 3px; 5 position: relative; 6 width: 40px; 7 height: 40px; 8 overflow: hidden; 9 transition: .5s; 10 letter-spacing: 2px 11} 12 13.loader span { 14 position: absolute; 15} 16 17.loader span:nth-child(1) { 18 top: 0; 19 left: -100%; 20 width: 100%; 21 height: var(--loader-size); 22 background: linear-gradient(90deg, transparent, var(--loader)); 23 animation: loader-anim1 1s linear infinite; 24} 25 26@keyframes loader-anim1 { 27 0% { 28 left: -100%; 29 } 30 31 50%,100% { 32 left: 100%; 33 } 34} 35 36.loader span:nth-child(2) { 37 top: -100%; 38 right: 0; 39 width: var(--loader-size); 40 height: 100%; 41 background: linear-gradient(180deg, transparent, var(--loader)); 42 animation: loader-anim2 1s linear infinite; 43 animation-delay: .25s 44} 45 46@keyframes loader-anim2 { 47 0% { 48 top: -100%; 49 } 50 51 50%,100% { 52 top: 100%; 53 } 54} 55 56.loader span:nth-child(3) { 57 bottom: 0; 58 right: -100%; 59 width: 100%; 60 height: var(--loader-size); 61 background: linear-gradient(270deg, transparent, var(--loader)); 62 animation: loader-anim3 1s linear infinite; 63 animation-delay: .5s 64} 65 66@keyframes loader-anim3 { 67 0% { 68 right: -100%; 69 } 70 71 50%,100% { 72 right: 100%; 73 } 74} 75 76.loader span:nth-child(4) { 77 bottom: -100%; 78 left: 0; 79 width: var(--loader-size); 80 height: 100%; 81 background: linear-gradient(360deg, transparent, var(--loader)); 82 animation: loader-anim4 1s linear infinite; 83 animation-delay: .75s 84} 85 86@keyframes loader-anim4 { 87 0% { 88 bottom: -100%; 89 } 90 91 50%,100% { 92 bottom: 100%; 93 } 94}
Comments
MIT License