CSS仿淘宝加载框是网页设计领域中必备的技能之一，今天就来分享一下如何实现这个效果。

.tb-loading-box {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
z-index: 99999;
}
.tb-loading-icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border: 5px solid #ffffff;
border-top-color: #f00;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

代码分为两部分，第一部分是覆盖整个页面的黑色半透明背景，第二部分是作为icon的白色圆环。其中利用了CSS3的动画效果让圆环旋转起来。整个加载框的实现非常简单，只需要在需要加载的地方加上一个