Loader by JaydipPrajapati1910
#212121
1.loader { 2 width: 100px; 3 height: 100px; 4 display: grid; 5 color: hsl(204, 86%, 69%); 6} 7 8.loader:before, 9.loader:after { 10 content: ""; 11 grid-area: 1/1; 12 --c1: linear-gradient(90deg,rgb(247, 247, 247) calc(100%/3),currentColor 0 calc(2*100%/3),rgb(247, 247, 247) 0); 13 --c2: linear-gradient( 0deg,rgb(247, 247, 247) calc(100%/3),currentColor 0 calc(2*100%/3),rgb(247, 247, 247) 0); 14 background: var(--c1), 15 var(--c2), 16 var(--c1), 17 var(--c2); 18 background-size: 300% 8px,8px 300%; 19 background-repeat: no-repeat; 20 animation: l1 1s infinite linear; 21} 22 23.loader:after { 24 margin: 10px; 25 transform: scaleX(-1); 26 animation-delay: -.25s; 27} 28 29@keyframes l1 { 30 0% { 31 background-position: 50% 0,100% 100%,0 100%,0 0 32 } 33 34 25% { 35 background-position: 0 0,100% 50% ,0 100%,0 0 36 } 37 38 50% { 39 background-position: 0 0,100% 0 ,50% 100%,0 0 40 } 41 42 75% { 43 background-position: 0 0,100% 0 ,100% 100%,0 50% 44 } 45 46 75.01% { 47 background-position: 100% 0,100% 0 ,100% 100%,0 50% 48 } 49 50 100% { 51 background-position: 50% 0,100% 0 ,100% 100%,0 100% 52 } 53} 54 55
469 views
469 views
MIT License