Loader by bernethe
#e8e8e8
1.loader { 2 width: 2rem; 3 height: 2rem; 4 clear: both; 5 margin: 1rem auto; 6 border: 0.0625rem #000 solid; 7 border-radius: .25rem; 8 overflow: hidden; 9 position: relative; 10} 11 12.loader:after, .loader:before { 13 content: ''; 14 border-radius: 50%; 15 position: absolute; 16 width: inherit; 17 height: inherit; 18 animation: spVortex 2s infinite linear; 19} 20 21.loader:before { 22 border-top: 0.375rem #000 solid; 23 top: -0.1875rem; 24 left: calc( -50% - 0.1875rem ); 25 transform-origin: right center; 26} 27 28.loader:after { 29 border-bottom: 0.375rem #000 solid; 30 top: 0.1875rem; 31 right: calc( -50% - 0.1875rem ); 32 transform-origin: left center; 33} 34 35@keyframes spVortex { 36 from { 37 transform: rotate(0deg); 38 } 39 40 to { 41 transform: rotate(359deg); 42 } 43}
734 views
734 views
Variations
1 MIT License