#212121
1.loader { 2 --ballcolor: #f2f2f2; 3 --shadow: 0px 0 #ffffff00; 4 --shadowcolor: #ffffff00; 5 width: 10px; 6 height: 10px; 7 left: -120px; 8 border-radius: 50%; 9 position: relative; 10 color: var(--ballcolor); 11 animation: shadowRolling 2s linear infinite; 12} 13 14@keyframes shadowRolling { 15 16 0% { 17 box-shadow: var(--shadow), 18 var(--shadow), 19 var(--shadow), 20 var(--shadow); 21 } 22 23 12% { 24 box-shadow: 100px 0 var(--ballcolor), 25 var(--shadow), 26 var(--shadow), 27 var(--shadow); 28 } 29 30 25% { 31 box-shadow: 110px 0 var(--ballcolor), 32 100px 0 var(--ballcolor), 33 var(--shadow), 34 var(--shadow); 35 } 36 37 36% { 38 box-shadow: 120px 0 var(--ballcolor), 39 110px 0 var(--ballcolor), 40 100px 0 var(--ballcolor), 41 var(--shadow); 42 } 43 44 50% { 45 box-shadow: 130px 0 var(--ballcolor), 46 120px 0 var(--ballcolor), 47 110px 0 var(--ballcolor), 48 100px 0 var(--ballcolor); 49 } 50 51 62% { 52 box-shadow: 200px 0 var(--shadowcolor), 53 130px 0 var(--ballcolor), 54 120px 0 var(--ballcolor), 55 110px 0 var(--ballcolor); 56 } 57 58 75% { 59 box-shadow: 200px 0 var(--shadowcolor), 60 200px 0 var(--shadowcolor), 61 130px 0 var(--ballcolor), 62 120px 0 var(--ballcolor); 63 } 64 65 87% { 66 box-shadow: 200px 0 var(--shadowcolor), 67 200px 0 var(--shadowcolor), 68 200px 0 var(--shadowcolor), 69 130px 0 var(--ballcolor); 70 } 71 72 100% { 73 box-shadow: 200px 0 var(--shadowcolor), 74 200px 0 var(--shadowcolor), 75 200px 0 var(--shadowcolor), 76 200px 0 var(--shadowcolor); 77 } 78}
1.8K views
1.8K views
Comments
MIT License