純css3實現的圓形進度條
阿新 • • 發佈：2019-01-31
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .spinner{ /*半透明藍色的圓弧，形成進度條的背景，透明的半圓弧和藍色的半圓弧交替旋轉構成進度條*/ font-size: 20px; width: 1em; height: 1em; border-radius: 50%; box-shadow:inset 0 0 0 .1em rgba(58, 168, 237, .2); } .spinner i { /*創造了一個透明矩形的一半*/ position:absolute; width:1em; height:1em; clip: rect(0, 1em, 1em, .5em); animation: spinner-circle-clipper 1s ease-in-out infinite; } @keyframes spinner-circle-clipper { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } .spinner i:after { /*l藍色的半圓弧*/ 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中的clip，用來實現剪裁。