Loader by kerolos23
#212121
1.loader { 2 display: inline-block; 3 position: relative; 4 width: 80px; 5 height: 80px; 6} 7 8.loader div { 9 position: absolute; 10 top: 33px; 11 width: 13px; 12 height: 13px; 13 border-radius: 50%; 14 background: #c517f0; 15 animation-timing-function: cubic-bezier(0, 1, 1, 0); 16} 17 18.loader div:nth-child(1) { 19 left: 8px; 20 animation: flip1 0.6s infinite; 21} 22 23.loader div:nth-child(2) { 24 left: 8px; 25 animation: flip2 0.6s infinite; 26} 27 28.loader div:nth-child(3) { 29 left: 32px; 30 animation: flip2 0.6s infinite; 31} 32 33.loader div:nth-child(4) { 34 left: 56px; 35 animation: flip3 0.6s infinite; 36} 37 38@keyframes flip1 { 39 0% { 40 transform: scale(0); 41 } 42 43 100% { 44 transform: scale(1); 45 } 46} 47 48@keyframes flip3 { 49 0% { 50 transform: scale(1); 51 } 52 53 100% { 54 transform: scale(0); 55 } 56} 57 58@keyframes flip2 { 59 0% { 60 transform: translate(0, 0); 61 } 62 63 100% { 64 transform: translate(24px, 0); 65 } 66} 67
886 views
886 views
MIT License