- Show effect – it’s always rotated
- Coding
- Codepen. I/o/w – lianfu/PE…
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; ">< span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; 10px; margin: 50px auto; text-indent: -9999em; width: 11em; height: 11em; border-radius: 50%; background: rgb(255, 0, 255); background: -moz-linear-gradient(left, rgb(255, 0, 255) 10%, rgba(255, 0, 255, 0) 42%); background: -webkit-linear-gradient(left, rgb(255, 0, 255) 10%, rgba(255, 0, 255, 0) 42%); background: -o-linear-gradient(left, rgb(255, 0, 255) 10%, rgba(255, 0, 255, 0) 42%); background: -ms-linear-gradient(left, rgb(255, 0, 255) 10%, rgba(255, 0, 255, 0) 42%); background: linear-gradient(to right, rgb(255, 0, 255) 10%, rgba(255, 0, 255, 0) 42%); position: relative; -webkit-animation: load3 1.4s infinite Linear; Animation: load3 1.4s infinite Linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .loader:before { width: 50%; height: 50%; background: rgb(255, 0, 255); border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .loader:after { background: #fff; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @-webkit-keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } </style> </body> </html>Copy the code