383 views
1.loader { 2 position: relative; 3 background-color: white; 4 padding-left: 1.5em; 5 padding-right: 1.5em; 6 padding-top: 3em; 7 top: -0.4em; 8 border-radius: 25px; 9 z-index: -1; 10 box-shadow: 5px 2px 0px #666666; 11} 12 13.clock { 14 position: relative; 15 top: -1.4em; 16 left: 0.05em; 17} 18 19.stage { 20 position: relative; 21 left: 0.5em; 22 background-color: black; 23 width: 4em; 24 height: .4em; 25 border-radius: 15px; 26 box-shadow: 2px 2px 0px #666666; 27 z-index: 4; 28} 29 30.hold { 31 position: relative; 32 background-color: limegreen; 33 width: 0.1em; 34 height: 4em; 35 left: 2.5em; 36 top: -.25em; 37 animation: 1.3s dangle infinite; 38 box-shadow: 4px 4px 0px #666666; 39 z-index: -1; 40} 41 42@keyframes dangle { 43 0% { 44 transform-origin: top center; 45 transform: rotate(45deg); 46 } 47 48 50% { 49 transform-origin: top center; 50 transform: rotate(-45deg); 51 } 52 53 100% { 54 transform-origin: top center; 55 transform: rotate(45deg); 56 } 57} 58 59.ball { 60 display: inline-block; 61 position: relative; 62 top: 3em; 63 left: -1.2em; 64 width: 2.5em; 65 height: 2.5em; 66 margin: 0; 67 border-radius: 50%; 68 background: #171717; 69 box-shadow: 1px 1px 0px #666666; 70}
Praashoo7
Prashant
MIT License