967 views
CSSAdd prefixes
1.loader { 2 position: relative; 3 width: 50px; 4 height: 50px; 5 border-radius: 50%; 6 background: linear-gradient(#ee280e, #15a0f7, #6ed15a); 7 animation: animate7712 1.2s linear infinite; 8} 9 10@keyframes animate7712 { 11 0% { 12 transform: rotate(0deg); 13 } 14 15 100% { 16 transform: rotate(360deg); 17 } 18} 19 20.loader span { 21 position: absolute; 22 width: 100%; 23 height: 100%; 24 border-radius: 50%; 25 background: linear-gradient(#ee280e, #15a0f7, #5ad15a); 26} 27 28.loader:after { 29 content: ''; 30 position: absolute; 31 top: 10px; 32 left: 10px; 33 right: 10px; 34 bottom: 10px; 35 background: #333; 36 border: solid #333 10px; 37 border-radius: 50%; 38} 39 40.loader span:nth-child(1) { 41 filter: blur(5px); 42} 43 44.loader span:nth-child(2) { 45 filter: blur(10px); 46} 47 48.loader span:nth-child(3) { 49 filter: blur(25px); 50} 51 52.loader span:nth-child(4) { 53 filter: blur(50px); 54}
HTML
1<div class="loader"> 2 <span></span> 3 <span></span> 4 <span></span> 5 <span></span> 6</div>