Loader by forgingdestiny
#e8e8e8
1/* Container for the loader */ 2.loader { 3 position: relative; 4 width: 10em; 5 height: 10em; 6} 7/* Track elements */ 8.track, .inner-track { 9 position: absolute; 10 width: 100%; 11 height: 100%; 12 border-radius: 50%; 13 box-shadow: inset -0.1em -0.1em 0.2em #d1d1d1, inset 0.1em 0.1em 0.2em #ffffff; 14} 15 16.inner-track { 17 width: 80%; 18 height: 80%; 19 top: 10%; 20 left: 10%; 21 border: 2em solid #f0f0f0; 22} 23/* Orb element */ 24.orb { 25 position: absolute; 26 width: 1.5em; 27 height: 1.5em; 28 top: 50%; 29 left: 50%; 30 background-color: #c0cfda; 31 border-radius: 50%; 32 animation: spin 1.5s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); 33 background: radial-gradient(circle at 30% 30%, #ffffff, #ccc); 34 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2); 35} 36 37/* Animations */ 38@keyframes spin { 39 0% { 40 transform: translate(-50%, -50%) rotate(90deg) translate(3em) rotate(-90deg); 41 } 42 43 100% { 44 transform: translate(-50%, -50%) rotate(450deg) translate(3em) rotate(-450deg); 45 } 46} 47 48
454 views
454 views
MIT License