Loader by Shoh2008
#212121
1.loader { 2 display: block; 3 position: relative; 4 height: 32px; 5 width: 140px; 6 border: 3px solid #fff; 7 border-radius: 20px; 8 box-sizing: border-box; 9 animation: balancing 2s linear infinite alternate; 10 transform-origin: center center; 11} 12 13.loader:before { 14 content: ''; 15 position: absolute; 16 left: 0; 17 bottom: 0; 18 width: 52px; 19 height: 26px; 20 border-radius: 20px; 21 background: gold; 22 animation: ballbns 2s linear infinite alternate; 23} 24 25@keyframes ballbns { 26 0% { 27 left: 0; 28 transform: translateX(0%); 29 } 30 31 100% { 32 left: 100%; 33 transform: translateX(-100%); 34 } 35} 36 37@keyframes balancing { 38 0% { 39 transform: rotate(-25deg); 40 } 41 42 50% { 43 transform: rotate(0deg); 44 } 45 46 100% { 47 transform: rotate(25deg); 48 } 49} 50
702 views
702 views
MIT License