Counter Circles

用来实现这种效果，圈的颜色、大小、圈内文字/icon等都是可设置调整的。

• Add / Edit Items，可以新增和编辑相应的元素，会有如下设置选项：
  • Filled Area Percentage，圆圈填充区域的百分比
  • Filled Color，填充颜色
  • Unfilled Color，未填充区域的颜色
  • Size of the Counter，圆圈的大小，和设置字体大小类似，单位是px，不过在这里只需要填写数字，不要带px
  • Show Scales，设置是否显示圆圈周围的刻度
  • Countdown，设置是否让圆圈逆时针方向进行填充
  • Animation Speed，动画速度，通常设置1500以上，也就是动画持续的时间是1.5s，时间设置的太短，动画就有点太仓促了
  • Counter Circle Text，圆圈中的文字，如果填写百分比的话，就和Filled Area Percentage的百分比一致，这样圆圈显示的填充百分比就和文字所表达的符合了
• Offset of Animation，这个设置的意思是什么情况下触发动画效果
  • Top of element hits bottom of viewport，元素的顶部到了浏览器窗口最下沿的位置，也就当我们流量一个比较长的页面的时候，这个动画效果在马上就要出现在我们视线的时候，就已经开始动了，默认是这个效果，也就是浏览的时候，动画效果出现的会比较自然些。 关于Offset of Animation的默认值的修改，可以到 Theme Options -> Fusion Builder Elements -> Animations 中进行设置
  • Top of element hits middle of viewport，元素的顶部到了浏览器窗口的中间位置，才会开始触发动画效果
  • Bottom of element enters viewport，元素的底部进入了浏览器窗口之时，就触发了动画效果
• Element Visibility，默认不修改，此选项和适配移动端有关系，可参考《设置移动端适配》
• CSS Class / CSS ID，默认不需填写内容，需要针对此内容进行单独的样式调整时才考虑使用这2个选项

适用：Avada5.2.2