纯 CSS3 实现 Flyme 风格的圆形进度条

http://c7sky.com/css3-flyme-loading-spinner.html
PS: 你可以通过更改 .spinner 的 font-size 来缩放进度条的大小~ Enjoy 🙂

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>纯 CSS3 实现 Flyme 风格的圆形进度条</title> <style type="text/css"> body { background: #f7f7f7; } .spinner { font-size: 40px; width: 1em; height: 1em; margin: 100px auto; border-radius: 50%; box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2); } .spinner i { position: absolute; clip: rect(0, 1em, 1em, .5em); width: 1em; height: 1em; animation: spinner-circle-clipper 1s ease-in-out infinite; } @keyframes spinner-circle-clipper { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } .spinner i:after { position: absolute; clip: rect(0, 1em, 1em, .5em); width: 1em; height: 1em; content: ''; animation: spinner-circle 1s ease-in-out infinite; border-radius: 50%; box-shadow: inset 0 0 0 .1em #3aa8ed; } @keyframes spinner-circle { 0% { transform: rotate(-180deg); } 100% { transform: rotate(180deg); } } </style> </head> <body> <div class="spinner"><i></i></div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 纯 CSS3 实现 Flyme 风格的圆形进度条