#212121
1.loader { 2 position: relative; 3 font-size: 16px; 4 width: 5.5em; 5 height: 5.5em; 6} 7 8.loader:before { 9 content: ''; 10 position: absolute; 11 transform: translate(-50%, -50%) rotate(45deg); 12 height: 100%; 13 width: 4px; 14 background: #fff; 15 left: 50%; 16 top: 50%; 17} 18 19.loader:after { 20 content: ''; 21 position: absolute; 22 left: 0.2em; 23 bottom: 0.18em; 24 width: 1em; 25 height: 1em; 26 background-color: orange; 27 border-radius: 15%; 28 animation: rollingRock 2.5s cubic-bezier(.79, 0, .47, .97) infinite; 29} 30 31@keyframes rollingRock { 32 0% { 33 transform: translate(0, -1em) rotate(-45deg) 34 } 35 36 5% { 37 transform: translate(0, -1em) rotate(-50deg) 38 } 39 40 20% { 41 transform: translate(1em, -2em) rotate(47deg) 42 } 43 44 25% { 45 transform: translate(1em, -2em) rotate(45deg) 46 } 47 48 30% { 49 transform: translate(1em, -2em) rotate(40deg) 50 } 51 52 45% { 53 transform: translate(2em, -3em) rotate(137deg) 54 } 55 56 50% { 57 transform: translate(2em, -3em) rotate(135deg) 58 } 59 60 55% { 61 transform: translate(2em, -3em) rotate(130deg) 62 } 63 64 70% { 65 transform: translate(3em, -4em) rotate(217deg) 66 } 67 68 75% { 69 transform: translate(3em, -4em) rotate(220deg) 70 } 71 72 100% { 73 transform: translate(0, -1em) rotate(-225deg) 74 } 75} 76
Comments
MIT License