Loader by Shoh2008
#212121
1.loader { 2 width: 48px; 3 height: 48px; 4 display: flex; 5 transform-origin: 50% 125%; 6 animation: mov-y 1s infinite linear; 7} 8 9.loader:before, 10 .loader:after { 11 content: ""; 12 flex: 1; 13 background: #fff; 14 transform-origin: 0% 100%; 15 animation: rtr-x 1s infinite linear; 16} 17 18.loader:before { 19 transform-origin: 100% 100%; 20 animation-name: rtr-rx; 21} 22 23@keyframes mov-y { 24 0%,25% { 25 transform: translateY(0) scaleY(1) 26 } 27 28 49% { 29 transform: translateY(-75%) scaleY(1) 30 } 31 32 50% { 33 transform: translateY(-75%) scaleY(-1) 34 } 35 36 75%,100% { 37 transform: translateY(-150%) scaleY(-1) 38 } 39} 40 41@keyframes rtr-x { 42 25%,75% { 43 transform: rotate(0deg) 44 } 45 46 50% { 47 transform: rotate(90deg) 48 } 49} 50 51@keyframes rtr-rx { 52 25%,75% { 53 transform: rotate(0deg) 54 } 55 56 50% { 57 transform: rotate(-90deg) 58 } 59} 60
621 views
621 views
MIT License