Loader by Ankesh2002
#e8e8e8
1.loader { 2 position: relative; 3 width: 164px; 4 height: 164px; 5} 6 7.loader::before , .loader::after { 8 content: ''; 9 position: absolute; 10 width: 40px; 11 height: 40px; 12 background-color: #00bd26; 13 left: 50%; 14 top: 50%; 15 animation: rotate 1s ease-in infinite; 16} 17 18.loader::after { 19 width: 20px; 20 height: 20px; 21 background-color: #00bd26; 22 animation: rotate 1s ease-in infinite, moveY 1s ease-in infinite; 23} 24 25@keyframes moveY { 26 0% , 100% { 27 top: 10% 28 } 29 30 45% , 55% { 31 top: 59% 32 } 33 34 60% { 35 top: 40% 36 } 37} 38 39@keyframes rotate { 40 0% { 41 transform: translate(-50%, -100%) rotate(0deg) scale(1 , 1) 42 } 43 44 25% { 45 transform: translate(-50%, 0%) rotate(180deg) scale(1 , 1) 46 } 47 48 45% , 55% { 49 transform: translate(-50%, 100%) rotate(180deg) scale(3 , 0.5) 50 } 51 52 60% { 53 transform: translate(-50%, 100%) rotate(180deg) scale(1, 1) 54 } 55 56 75% { 57 transform: translate(-50%, 0%) rotate(270deg) scale(1 , 1) 58 } 59 60 100% { 61 transform: translate(-50%, -100%) rotate(360deg) scale(1 , 1) 62 } 63} 64
242 views
242 views
MIT License