css实现加载中的效果

那天闲着，学习了一下样式效果，本身实现了一个简单的加载中的效果 废话很少说，开始吧！！

1、实现一个圆环

   
   要实现圆环，首先咱们须要知道盒模型里面border的本质，先来看一个效果吧

  

 

 从上面，咱们应该能够看到元素盒模型中 border 的本质：元素每一个方向上的 border 是梯形而并不是矩形。知道了这个，想实现弧状的样式就不是问题了

咱们只须要想办法让中间红色区域变成弧状就能够啦，咱们设置div的border-radius为50%，就变成这样啦，看下图

是否是一个圆形就出现啦，如今咱们让中间的区域为白色就会出现圆弧了，其实默认背景色就是白色，咱们也能够不设置背景色，这边为了说明原理，咱们仍是本身设置

通常加载中的圆环都不是整个的，这里咱们画出一个半闭合的圆环

看懂了吗？只须要设置border-top的颜色为白色就能够了，这样咱们就解决了第一个问题了，下来就是让圆环动起来了。

2、转动的圆环

 这里就要用到css里面的动画了，咱们定义一个动画，由于这里只是演示，因此简单的实现如下动画，而且也没有兼容各大浏览器，本身能够根据状况写全。

1  @keyframes loading{
2    0%{
3      transform: rotate(0deg);
4      }
5     100%{
6      transform: rotate(360deg);
7      }
8  }

View Code

下来咱们将动画效果加入到样式中，就实现效果了，demo以下 

  http://files.cnblogs.com/files/nini-huai/demo.gif