Loader by JulioCodesSM
#212121
1/* From uiverse.io by @JulioCodesSM */ 2.loader { 3 width: 50px; 4 height: 50px; 5 position: relative; 6 transform: translateX(-25px); 7 /* Compensating for the left of 50px in the keyframe. */ 8} 9 10.loader::before, 11.loader::after { 12 content: ''; 13 position: absolute; 14 width: inherit; 15 height: inherit; 16 border-radius: 50%; 17 mix-blend-mode: multiply; 18 animation: rotate9 1s infinite cubic-bezier(0.77, 0, 0.175, 1); 19} 20 21.loader::before { 22 background-color: #fc3f9e; 23} 24 25.loader::after { 26 background-color: #50e8f3; 27 animation-delay: .5s; 28} 29 30@keyframes rotate9 { 31 0%,100% { 32 left: 50px; 33 } 34 35 25% { 36 transform: scale(.3); 37 } 38 39 50% { 40 left: 0; 41 } 42 43 75% { 44 transform: scale(1); 45 } 46}
995 views
995 views
MIT License