要使用CSS实现圆形加载进度条，需要使用CSS的transform和animation属性，以及CSS伪元素和关键帧动画。以下是一个基本的CSS样式代码，用于创建一个圆形加载进度条：
.progress {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f2f2f2;
overflow: hidden;
}
.progress::before,
.progress::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid #3498db;
border-right-color: transparent;
border-bottom-color: transparent;
}
.progress::before {
z-index: 2;
animation: spin 2s linear infinite;
}
.progress::after {
z-index: 1;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}这段代码中，.progress 类设置了容器的基本样式，包括位置、尺寸、圆角和背景颜色。.progress::before 和 .progress::after 则分别表示进度条的前景和背景。它们使用了伪元素 ::before 和 ::after，并设置了它们的基本样式，包括位置、尺寸、圆角和边框颜色。进度条的前景边框的右侧和底部颜色设置成了透明，这样就可以看到进度条的旋转动画了。
进度条的动画使用了CSS关键帧动画 @keyframes，其中定义了从 0% 到 100% 的旋转角度变化。在 .progress::before 中应用了这个动画，并设置了动画的时间、速度和循环次数。
最后，将这段CSS代码应用到HTML页面中的元素，例如：
<div class="progress"></div>这样就可以显示一个圆形加载进度条了。需要注意的是，这只是实现圆形加载进度条的一种方法，还有其他的实现方式，如SVG等。