Loader by aadium
#212121
1.cloader { 2 width: 10em; 3 height: 10em; 4 border: 4px solid white; 5 border-radius: 50%; 6 margin: 50px auto; 7 position: relative; 8 padding: 2rem; 9} 10 11.clface { 12 position: relative; 13 width: 100%; 14 height: 100%; 15 transform: translateY(-3px); 16} 17 18.top { 19 height: 10px; 20 width: 4px; 21 content: ''; 22 background-color: white; 23 border-radius: 5em; 24 margin-top: -30px; 25 margin-left: 42px; 26} 27 28.bottom { 29 height: 10px; 30 width: 4px; 31 content: ''; 32 background-color: white; 33 border-radius: 5em; 34 margin-top: 135px; 35 margin-left: 42px; 36} 37 38.left { 39 height: 4px; 40 width: 10px; 41 content: ''; 42 background-color: white; 43 border-radius: 5em; 44 margin-top: -82px; 45 margin-left: 112px; 46} 47 48.right { 49 height: 4px; 50 width: 10px; 51 content: ''; 52 background-color: white; 53 border-radius: 5em; 54 margin-top: -4px; 55 margin-left: -35px; 56} 57 58.clsface { 59 position: absolute; 60 width: 40px; 61 height: 40px; 62 margin-left: 24px; 63 margin-top: 15px; 64 border-radius: 6em; 65 border: 2px solid #636363; 66} 67 68.hand { 69 width: 65%; 70 height: 4px; 71 background-color: white; 72 border-radius: 3em; 73 border: none; 74 position: absolute; 75 top: 85%; 76 left: -15%; 77 transform-origin: 100%; 78 transform: rotate(90deg); 79} 80 81.pin { 82 width: 25%; 83 height: 25%; 84 border-radius: 50%; 85 background: white; 86 position: absolute; 87 top: 86%; 88 left: 50%; 89 transform: translate(-50%, -50%); 90} 91 92#sub { 93 width: 10%; 94 height: 10%; 95 border-radius: 50%; 96 background: #636363; 97 position: absolute; 98 top: 40%; 99 left: 50%; 100 transform: translate(-50%, -50%); 101} 102 103#h1 { 104 animation: rotate 4s linear infinite; 105} 106 107#h2 { 108 width: 45%; 109 left: 5%; 110 top: 45%; 111 background-color: #636363; 112 animation: rotate 1s linear infinite; 113} 114 115@keyframes rotate { 116 from { 117 transform: rotate(90deg); 118 } 119 120 to { 121 transform: rotate(450deg); 122 } 123}
1.3K views
1.3K views
MIT License