css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆，然后声明透明度为0.1的黑色边框(看起来是灰色)，修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画，并让该动画无限播放(infinite)即可。  

使用的css3 特性:

1. transform属性的 rotate，共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

2. animation ：实现到类似于 Loading 动画的效果

代码：

<div class="donut"></div><style>@keyframes donut-spin {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}.donut {  display: inline-block;  border: 4px solid rgba(0, 0, 0, 0.1);  border-left-color: #7983ff;  border-radius: 50%;  width: 30px;  height: 30px;  animation: donut-spin 1.2s linear infinite;}</style>

新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html

说明：使用半透明的border 对于整个元素，除了用作圆环加载指示器的一侧。使用animation 旋转元素。

效果如下：