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