天给大家带来是四种颜色的加载动画效果。大家可以仔细看到这是四个小点，点进行圆形的环绕，三百六十度的。看一下代码区域，我用开发工具是hplx开发unif的。

·首先看一下威武士图容器，里面包含svg图形元素，里面又包含了四个圆形，圆形a、圆形b、圆形c、圆形d等。大家可以看我这注释就应该看得明白，我很写的很详细。看效果去就知道一共是四个圆，大家可以发现没有，每个点都有自己运动的轨迹。

·下面看一下csspro，首先是背景和整体的效果。下面就是缩小svg元素，已经就把它给缩小了，原本是一个圆，进行六六的。大家可以看一下，在停收小圆，看起来是个小圆。

·进行所有圆环动画的类名任a，大家可以看到a圆的关键帧过渡的效果，零六百六，负百分之四十到百分之九十等。这个是第一个，a点也是个圆形的动画。

·设置了a的颜色，红色在跳，下面就是b的颜色、c的颜色、d的颜色。

前面给大家讲了a的动画的关键帧，大家看到这是b的几乎就是相同的，只是大小和旋转的轨迹是不一样的。其实很简单的，四个圆形分别设置成不同的颜色，每个有一个独立的运动轨迹就可以完成了。

喜欢的可以点赞收藏一下，也可以自己动手去写。如果想要原代码的可以找我唠嗑进行获取。今天的css样式就讲到这了。

近在做一小程序，看有的APP上表示完善度的进度环不错，想在小程序和网站上实现，又想尽量不增加加载时间，这里弄了个纯CSS的，在小程序和网站上都跑通了，参考了网上的一些个例子，这里总结一下

HTML:

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(--9deg);"></div><!--9deg 从左到右数 -135到45，一共180度-->

</div>

<div class="text">7<br>完善度</div>

</div>

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(9deg);"></div>

<!--从左到右读数 -135到45，一共180度-->

</div>

<div class="text">8<br>完善度</div>

</div>

CSS:

.blockOut0 { width: 40px; height: 40px; position: relative; overflow:hidden; margin:20px auto}

.block { width: 40px; height: 40px; border-left:4px solid #f60; border-top:4px solid #f60; border-right:4px solid #ccc; border-bottom:4px solid #ccc; border-radius: 50%; box-sizing: border-box;}

.blockOut { width: 40px; height:20px; overflow: hidden;}

.text { text-align: center; top: 8px; position: absolute; width: 100%; color:#f60; font-size:9px}