浏览网页时，难免会有网页加载慢的情况，当网页长时间未加载完毕时，可以显示一些动画效果，以避免网页长时间空白。本实例实现的是圆形加载动画，当页面加载完成时，页面中的弧形会一直在页面中转动，具体运行效果如下图所示：
本实例主要结合使用css3中的边框属性和动画属性实现圆形加载动画。为<div>标签添加边框，可通过border属性可实现。其使用语法如下：
border: border-color border-style border-width
//border-color：设置边框颜色。
//border-style：设置边框样式。
//border-width：设置边框宽度。
需要说明的是，上面三个属性值可以在一行里设置，也可单独设置，例如，单独设置边框颜色的语法为
border-color：color
当然若以上三个属性在一行里设置时，表示设置标签的四条边框的样式相同，
同样，我们可以单独设置某一条边框的样式，例如，单独设置上边框的样式，其语法为：
Border-top: border-color border-style border-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形加载动画</title>
<style>
.box {
text-align: center;
width: 300px;
height: 200px;
margin: 20px auto;
}
.box>span {
animation: loader 1000ms infinite linear;
border-radius: 100%;
border: 6px solid #2dbb55;
border-left-color: transparent;
color: transparent;
display: inline-block;
line-height: 1.2;
width: 50px;
height: 50px;
}
@keyframes loader {
0% { transform: rotate(0deg); }
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="box"><span></span></div>
</body>
</html>