275 views
1.loader, 2.loader:before, 3.loader:after { 4 border-radius: 50%; 5} 6 7.loader { 8 color: #ffffff; 9 font-size: 11px; 10 text-indent: -99999em; 11 margin: 55px auto; 12 position: relative; 13 width: 10em; 14 height: 10em; 15 box-shadow: inset 0 0 0 1em; 16 -webkit-transform: translateZ(0); 17 -ms-transform: translateZ(0); 18 transform: translateZ(0); 19} 20 21.loader:before, 22.loader:after { 23 position: absolute; 24 content: ''; 25} 26 27.loader:before { 28 width: 5.2em; 29 height: 10.2em; 30 background: #0011ff; 31 border-radius: 10.2em 0 0 10.2em; 32 top: -0.1em; 33 left: -0.1em; 34 -webkit-transform-origin: 5.1em 5.1em; 35 transform-origin: 5.1em 5.1em; 36 -webkit-animation: load2 2s infinite ease 1.5s; 37 animation: load2 2s infinite ease 1.5s; 38} 39 40.loader:after { 41 width: 5.2em; 42 height: 10.2em; 43 background: #0011ff; 44 border-radius: 0 10.2em 10.2em 0; 45 top: -0.1em; 46 left: 4.9em; 47 -webkit-transform-origin: 0.1em 5.1em; 48 transform-origin: 0.1em 5.1em; 49 -webkit-animation: load2 2s infinite ease; 50 animation: load2 2s infinite ease; 51} 52 53@keyframes load2 { 54 0% { 55 -webkit-transform: rotate(0deg); 56 transform: rotate(0deg); 57 } 58 59 100% { 60 -webkit-transform: rotate(360deg); 61 transform: rotate(360deg); 62 } 63} 64
guilhermeyohan
Guilherme Yohan
MIT License