Loader by mobinkakei
#212121
1.loader { 2 width: 54px; 3 height: 54px; 4 position: relative; 5 border-radius: 4px; 6 background-color: #fff; 7 background-image: radial-gradient(circle 5px, #19191a 100%, transparent 0), 8 radial-gradient(circle 5px, #19191a 100%, transparent 0), 9 radial-gradient(circle 5px, #19191a 100%, transparent 0), 10 radial-gradient(circle 5px, #19191a 100%, transparent 0), 11 radial-gradient(circle 5px, #19191a 100%, transparent 0), 12 radial-gradient(circle 5px, #19191a 100%, transparent 0); 13 background-repeat: no-repeat; 14 animation: move 4s linear infinite, rotate 2s linear infinite; 15} 16 17@keyframes rotate { 18 0%, 19 20% { 20 transform: rotate(0deg); 21 } 22 30%, 23 40% { 24 transform: rotate(90deg); 25 } 26 50%, 27 60% { 28 transform: rotate(180deg); 29 } 30 70%, 31 80% { 32 transform: rotate(270deg); 33 } 34 90%, 35 100% { 36 transform: rotate(360deg); 37 } 38} 39@keyframes move { 40 0%, 41 9% { 42 background-position: -12px -15px, -12px 0px, -12px 15px, 12px -15px, 43 12px 0px, 12px 15px; 44 } 45 10%, 46 25% { 47 background-position: 0px -15px, -12px 0px, -12px 15px, 34px -15px, 12px 0px, 48 12px 15px; 49 } 50 30%, 51 45% { 52 background-position: 0px -34px, -12px -10px, -12px 12px, 34px -15px, 53 12px -10px, 12px 12px; 54 } 55 50%, 56 65% { 57 background-position: 0px -34px, -12px -34px, -12px 12px, 34px -12px, 58 0px -10px, 12px 12px; 59 } 60 70%, 61 85% { 62 background-position: 0px -34px, -12px -34px, 0px 12px, 34px -12px, 0px -10px, 63 34px 12px; 64 } 65 90%, 66 100% { 67 background-position: 0px -34px, -12px -34px, 0px 0px, 34px -12px, 0px 0px, 68 34px 12px; 69 } 70} 71
402 views
402 views
MIT License