css 加载效果

css3的出现让我们可以用css画一些简单的动画,之前加载中这样的效果需要设计帮我们出图,而现在我们可以通过css代码来实现加载动画,这我们可以不用完全依靠设计了。

1.

代码如下

<div class="loading"></div>

  <style>
    .loading {
      width: 50px;
      height: 50px;
      border: 5px solid #eee;
      border-left-color: #e27a61;
      border-radius: 50%;
      animation: loading-animate 1s linear infinite;
    }
    @keyframes loading-animate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

  </style>

2.

 

代码

<div class="loading">
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
  </div>

  <style>
    .loading {
      position: relative;
      width: 50px;
      height: 50px;
      animation: loading-animate 2s linear infinite;
    }
    .loading span {
      position: absolute;
      display: block;
      width: 50px;
      height: 3px;
      border-radius: 3px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .loading span i {
      display: block;
      background-color: #e27a61;
      border-radius: 3px;
      width: 12px;
      height: 3px;
      margin-right: 0;
    }
    .loading span:nth-child(2) {
      transform: rotate(30deg);
    }
    .loading span:nth-child(3) {
      transform: rotate(60deg);
    }
    .loading span:nth-child(4) {
      transform: rotate(90deg);
    }
    .loading span:nth-child(5) {
      transform: rotate(120deg);
    }
    .loading span:nth-child(6) {
      transform: rotate(150deg);
    }
    .loading span:nth-child(7) {
      transform: rotate(180deg);
    }
    .loading span:nth-child(8) {
      transform: rotate(210deg);
    }
    .loading span:nth-child(9) {
      transform: rotate(240deg);
    }
    .loading span:nth-child(10) {
      transform: rotate(270deg);
    }
    .loading span:nth-child(11) {
      transform: rotate(300deg);
    }
    .loading span:nth-child(12) {
      transform: rotate(330deg);
    }

    @keyframes loading-animate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

  </style>