Loader by escannord
#e8e8e8
1.loader { 2 text-align: center; 3 position: relative; 4 display: flex; 5} 6 7.loader .ball { 8 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); 9} 10 11.ball { 12 display: block; 13 width: 20px; 14 height: 20px; 15 border-radius: 50%; 16 background: radial-gradient(circle at 8px 5px, white 5%, black); 17 position: relative; 18 transform-origin: 50% -100px; 19} 20 21.ball:last-child { 22 animation: balance-right 1.2s infinite linear; 23} 24 25.ball:first-child { 26 animation: balance-left 1.2s infinite linear; 27} 28 29@keyframes balance-right { 30 0% { 31 transform: rotate(0deg); 32 animation-timing-function: linear; 33 } 34 35 50% { 36 transform: rotate(0deg); 37 animation-timing-function: ease-out; 38 } 39 40 75% { 41 transform: rotate(-30deg); 42 animation-timing-function: ease-in; 43 } 44} 45 46@keyframes balance-left { 47 0% { 48 transform: rotate(0deg); 49 animation-timing-function: ease-out; 50 } 51 52 25% { 53 transform: rotate(30deg); 54 animation-timing-function: ease-in; 55 } 56 57 50% { 58 transform: rotate(0deg); 59 animation-timing-function: linear; 60 } 61} 62
404 views
404 views
MIT License