Loader by shadowfax29
#212121
1.container { 2 position: relative; 3 width: 200px; 4 height: 200px; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 border-radius: 50%; 9} 10 11.loader { 12 width: 10px; 13 height: 30px; 14 left: var(--left); 15 border-radius: 10px 50px; 16 box-shadow: 0px 0px 5px black; 17 animation: dominos 1s ease infinite; 18} 19 20.loader:nth-child(1) { 21 --left: 80px; 22 animation-delay: 0.325s; 23 background-color: red; 24} 25 26.loader:nth-child(3) { 27 left: 60px; 28 animation-delay: 0.625s; 29 background-color: blue; 30} 31 32.loader:nth-child(5) { 33 animation-delay: 0.865s; 34 left: 40px; 35 background-color: green; 36} 37 38.loader:nth-child(2) { 39 --left: 70px; 40 animation-delay: 0.5s; 41 background-color: yellow; 42} 43 44.loader:nth-child(4) { 45 animation-delay: 0.74s; 46 left: 50px; 47 background-color: orange; 48} 49 50@keyframes dominos { 51 50% { 52 opacity: 0.7; 53 } 54 55 75% { 56 -webkit-transform: rotate(90deg); 57 transform: rotate(90deg); 58 } 59 60 80% { 61 opacity: 1; 62 } 63} 64 65 66 67 68
549 views
549 views
MIT License