CSS环形加载动画是一种很流行的动画形式，它可以吸引用户的注意力，提高网站的用户体验度。下面我们来简单介绍一下如何使用CSS编写一个环形加载动画。

.loader {
position: relative;
width: 64px;
height: 64px;
}
.loader:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 8px solid #f3f3f3;
border-radius: 50%;
}
.loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 8px solid #3498db;
border-radius: 50%;
animation: loader 2s linear infinite;
border-bottom-color: transparent;
border-right-color: transparent;
}
@keyframes loader {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

首先，我们需要定义一个div元素，并为其添加一个loader类。接着，在loader类中，我们使用绝对定位和宽高设置，将div元素的大小和位置确定下来。

在这个loader类中定义了:before和:after伪元素。这两个伪元素在被创建后，分别代表了一个空心圆和一个实心圆，它们的样式在一定程度上构成了这个环形动画的背景和主体部分。

通过animation属性，我们为后置伪元素添加了一个名为loader的动画，其中2s表示动画持续时间，linear表示动画的时间曲线是线性的，infinite表示动画无限循环播放。

最后，通过@keyframes，在这个CSS3动画的关键帧中定义了从0度旋转到360度旋转的动画效果，让实心的圆在一个圆形路径上不断旋转，形成了一个环形的加载动画效果。