使用Loding的gif图，每一帧图片的外层会有白色描边。所以如果必须使用gif图的话，请将背景色设置为白色。

　　你也尝试用以下方法，使用css来实现loading的效果

　　1. 适用于pc端。在移动端上会缩放的很小。

　　html：

<div class="weui_loading_toast" style="display: block;" id="loading">

        <div class="weui_mask_transparent"></div>

        <div class="weui_toast">

            <div class="weui_loading">

                <div class="weui_loading_leaf weui_loading_leaf_0"></div>

                <div class="weui_loading_leaf weui_loading_leaf_1"></div>

                <div class="weui_loading_leaf weui_loading_leaf_2"></div>

                <div class="weui_loading_leaf weui_loading_leaf_3"></div>

                <div class="weui_loading_leaf weui_loading_leaf_4"></div>

                <div class="weui_loading_leaf weui_loading_leaf_5"></div>

                <div class="weui_loading_leaf weui_loading_leaf_6"></div>

                <div class="weui_loading_leaf weui_loading_leaf_7"></div>

                <div class="weui_loading_leaf weui_loading_leaf_8"></div>

                <div class="weui_loading_leaf weui_loading_leaf_9"></div>

                <div class="weui_loading_leaf weui_loading_leaf_10"></div>

                <div class="weui_loading_leaf weui_loading_leaf_11"></div>

            </div>

            <p class="weui_toast_content">评论加载中</p>

        </div>

    </div>

　　css:

.weui_mask_transparent {

  position: fixed;

  z-index: 1001;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

}

.weui_loading_toast .weui_toast {

    width: 7.6rem;

    min-height: 7.6rem;

}

.weui_toast {

  position: fixed;

  z-index: 1003;

  top: 180px;

  left: 50%;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  background: rgba(40, 40, 40, 0.75);

  text-align: center;

  border-radius: 5px;

  color: #FFFFFF;

}

.weui_toast_content {

  margin: 15px 0;

}

.weui_loading_toast .weui_toast_content {

  margin-top: 64%;

  font-size: 14px;

}

.weui_loading {

  position: absolute;

  width: 0px;

  z-index: 2000000000;

  left: 50%;

  top: 38%;

}

.weui_loading_leaf {

  position: absolute;

  top: -1px;

  opacity: 0.25;

}

.weui_loading_leaf:before {

  content: " ";

  position: absolute;

  width: 8.14px;

  height: 2.08px;

  background: #d1d1d5;

  box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;

  border-radius: 1px;

  -webkit-transform-origin: left 50% 0px;

      -ms-transform-origin: left 50% 0px;

          transform-origin: left 50% 0px;

}

.weui_loading_leaf_0 {

  -webkit-animation: opacity-60-25-0-12 1.25s linear infinite;

          animation: opacity-60-25-0-12 1.25s linear infinite;

}

.weui_loading_leaf_0:before {

  -webkit-transform: rotate(0deg) translate(7.92px, 0px);

      -ms-transform: rotate(0deg) translate(7.92px, 0px);

          transform: rotate(0deg) translate(7.92px, 0px);

}

.weui_loading_leaf_1 {

  -webkit-animation: opacity-60-25-1-12 1.25s linear infinite;

          animation: opacity-60-25-1-12 1.25s linear infinite;

}

.weui_loading_leaf_1:before {

  -webkit-transform: rotate(30deg) translate(7.92px, 0px);

      -ms-transform: rotate(30deg) translate(7.92px, 0px);

          transform: rotate(30deg) translate(7.92px, 0px);

}

.weui_loading_leaf_2 {

  -webkit-animation: opacity-60-25-2-12 1.25s linear infinite;

          animation: opacity-60-25-2-12 1.25s linear infinite;

}

.weui_loading_leaf_2:before {

  -webkit-transform: rotate(60deg) translate(7.92px, 0px);

      -ms-transform: rotate(60deg) translate(7.92px, 0px);

          transform: rotate(60deg) translate(7.92px, 0px);

}

.weui_loading_leaf_3 {

  -webkit-animation: opacity-60-25-3-12 1.25s linear infinite;

          animation: opacity-60-25-3-12 1.25s linear infinite;

}

.weui_loading_leaf_3:before {

  -webkit-transform: rotate(90deg) translate(7.92px, 0px);

      -ms-transform: rotate(90deg) translate(7.92px, 0px);

          transform: rotate(90deg) translate(7.92px, 0px);

}

.weui_loading_leaf_4 {

  -webkit-animation: opacity-60-25-4-12 1.25s linear infinite;

          animation: opacity-60-25-4-12 1.25s linear infinite;

}

.weui_loading_leaf_4:before {

  -webkit-transform: rotate(120deg) translate(7.92px, 0px);

      -ms-transform: rotate(120deg) translate(7.92px, 0px);

          transform: rotate(120deg) translate(7.92px, 0px);

}

.weui_loading_leaf_5 {

  -webkit-animation: opacity-60-25-5-12 1.25s linear infinite;

          animation: opacity-60-25-5-12 1.25s linear infinite;

}

.weui_loading_leaf_5:before {

  -webkit-transform: rotate(150deg) translate(7.92px, 0px);

      -ms-transform: rotate(150deg) translate(7.92px, 0px);

          transform: rotate(150deg) translate(7.92px, 0px);

}

.weui_loading_leaf_6 {

  -webkit-animation: opacity-60-25-6-12 1.25s linear infinite;

          animation: opacity-60-25-6-12 1.25s linear infinite;

}

.weui_loading_leaf_6:before {

  -webkit-transform: rotate(180deg) translate(7.92px, 0px);

      -ms-transform: rotate(180deg) translate(7.92px, 0px);

          transform: rotate(180deg) translate(7.92px, 0px);

}

.weui_loading_leaf_7 {

  -webkit-animation: opacity-60-25-7-12 1.25s linear infinite;

          animation: opacity-60-25-7-12 1.25s linear infinite;

}

.weui_loading_leaf_7:before {

  -webkit-transform: rotate(210deg) translate(7.92px, 0px);

      -ms-transform: rotate(210deg) translate(7.92px, 0px);

          transform: rotate(210deg) translate(7.92px, 0px);

}

.weui_loading_leaf_8 {

  -webkit-animation: opacity-60-25-8-12 1.25s linear infinite;

          animation: opacity-60-25-8-12 1.25s linear infinite;

}

.weui_loading_leaf_8:before {

  -webkit-transform: rotate(240deg) translate(7.92px, 0px);

      -ms-transform: rotate(240deg) translate(7.92px, 0px);

          transform: rotate(240deg) translate(7.92px, 0px);

}

.weui_loading_leaf_9 {

  -webkit-animation: opacity-60-25-9-12 1.25s linear infinite;

          animation: opacity-60-25-9-12 1.25s linear infinite;

}

.weui_loading_leaf_9:before {

  -webkit-transform: rotate(270deg) translate(7.92px, 0px);

      -ms-transform: rotate(270deg) translate(7.92px, 0px);

          transform: rotate(270deg) translate(7.92px, 0px);

}

.weui_loading_leaf_10 {

  -webkit-animation: opacity-60-25-10-12 1.25s linear infinite;

          animation: opacity-60-25-10-12 1.25s linear infinite;

}

.weui_loading_leaf_10:before {

  -webkit-transform: rotate(300deg) translate(7.92px, 0px);

      -ms-transform: rotate(300deg) translate(7.92px, 0px);

          transform: rotate(300deg) translate(7.92px, 0px);

}

.weui_loading_leaf_11 {

  -webkit-animation: opacity-60-25-11-12 1.25s linear infinite;

          animation: opacity-60-25-11-12 1.25s linear infinite;

}

.weui_loading_leaf_11:before {

  -webkit-transform: rotate(330deg) translate(7.92px, 0px);

      -ms-transform: rotate(330deg) translate(7.92px, 0px);

          transform: rotate(330deg) translate(7.92px, 0px);

}

@-webkit-keyframes opacity-60-25-0-12 {

  0% {

    opacity: 0.25;

  }

  0.01% {

    opacity: 0.25;

  }

  0.02% {

    opacity: 1;

  }

  60.01% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-1-12 {

  0% {

    opacity: 0.25;

  }

  8.34333% {

    opacity: 0.25;

  }

  8.35333% {

    opacity: 1;

  }

  68.3433% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-2-12 {

  0% {

    opacity: 0.25;

  }

  16.6767% {

    opacity: 0.25;

  }

  16.6867% {

    opacity: 1;

  }

  76.6767% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-3-12 {

  0% {

    opacity: 0.25;

  }

  25.01% {

    opacity: 0.25;

  }

  25.02% {

    opacity: 1;

  }

  85.01% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-4-12 {

  0% {

    opacity: 0.25;

  }

  33.3433% {

    opacity: 0.25;

  }

  33.3533% {

    opacity: 1;

  }

  93.3433% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-5-12 {

  0% {

    opacity: 0.270958333333333;

  }

  41.6767% {

    opacity: 0.25;

  }

  41.6867% {

    opacity: 1;

  }

  1.67667% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.270958333333333;

  }

}

@-webkit-keyframes opacity-60-25-6-12 {

  0% {

    opacity: 0.375125;

  }

  50.01% {

    opacity: 0.25;

  }

  50.02% {

    opacity: 1;

  }

  10.01% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.375125;

  }

}

@-webkit-keyframes opacity-60-25-7-12 {

  0% {

    opacity: 0.479291666666667;

  }

  58.3433% {

    opacity: 0.25;

  }

  58.3533% {

    opacity: 1;

  }

  18.3433% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.479291666666667;

  }

}

@-webkit-keyframes opacity-60-25-8-12 {

  0% {

    opacity: 0.583458333333333;

  }

  66.6767% {

    opacity: 0.25;

  }

  66.6867% {

    opacity: 1;

  }

  26.6767% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.583458333333333;

  }

}

@-webkit-keyframes opacity-60-25-9-12 {

  0% {

    opacity: 0.687625;

  }

  75.01% {

    opacity: 0.25;

  }

  75.02% {

    opacity: 1;

  }

  35.01% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.687625;

  }

}

@-webkit-keyframes opacity-60-25-10-12 {

  0% {

    opacity: 0.791791666666667;

  }

  83.3433% {

    opacity: 0.25;

  }

  83.3533% {

    opacity: 1;

  }

  43.3433% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.791791666666667;

  }

}

@-webkit-keyframes opacity-60-25-11-12 {

  0% {

    opacity: 0.895958333333333;

  }

  91.6767% {

    opacity: 0.25;

  }

  91.6867% {

    opacity: 1;

  }

  51.6767% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.895958333333333;

  }

}

1.1   如果想用于移动端，需要引入淘宝的flexible.min.js，并用下面的css

　　css：

.weui_mask_transparent {

  position: fixed;

  z-index: 1001;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

}

.weui_loading_toast .weui_toast {

    width: 2.5rem;

    min-height: 2.5rem;

}

.weui_toast {

  position: fixed;

  z-index: 1003;

  top: 50%;

  left: 50%;

  -webkit-transform: translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

  background: rgba(40, 40, 40, 0.75);

  text-align: center;

  border-radius: 5px;

  color: #FFFFFF;

}

.weui_toast_content {

  margin: 0.234375rem 0;

}

.weui_loading_toast .weui_toast_content {

  margin-top: 64%;

  font-size: 0.35rem;

}

.weui_loading {

  position: absolute;

  width: 0px;

  z-index: 2000000000;

  left: 50%;

  top: 38%;

}

.weui_loading_leaf {

  position: absolute;

  top: -0.015625rem;

  opacity: 0.25;

}

.weui_loading_leaf:before {

  content: " ";

  position: absolute;

  width: 0.2271875rem;

  height: 0.0625rem;

  background: #d1d1d5;

  box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0.015625rem;

  border-radius: -0.015625rem;

  -webkit-transform-origin: left 50% 0px;

      -ms-transform-origin: left 50% 0px;

          transform-origin: left 50% 0px;

}

.weui_loading_leaf_0 {

  -webkit-animation: opacity-60-25-0-12 1.25s linear infinite;

          animation: opacity-60-25-0-12 1.25s linear infinite;

}

.weui_loading_leaf_0:before {

  -webkit-transform: rotate(0deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(0deg) translate(0.12375rem, 0px);

          transform: rotate(0deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_1 {

  -webkit-animation: opacity-60-25-1-12 1.25s linear infinite;

          animation: opacity-60-25-1-12 1.25s linear infinite;

}

.weui_loading_leaf_1:before {

  -webkit-transform: rotate(30deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(30deg) translate(0.12375rem, 0px);

          transform: rotate(30deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_2 {

  -webkit-animation: opacity-60-25-2-12 1.25s linear infinite;

          animation: opacity-60-25-2-12 1.25s linear infinite;

}

.weui_loading_leaf_2:before {

  -webkit-transform: rotate(60deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(60deg) translate(0.12375rem, 0px);

          transform: rotate(60deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_3 {

  -webkit-animation: opacity-60-25-3-12 1.25s linear infinite;

          animation: opacity-60-25-3-12 1.25s linear infinite;

}

.weui_loading_leaf_3:before {

  -webkit-transform: rotate(90deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(90deg) translate(0.12375rem, 0px);

          transform: rotate(90deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_4 {

  -webkit-animation: opacity-60-25-4-12 1.25s linear infinite;

          animation: opacity-60-25-4-12 1.25s linear infinite;

}

.weui_loading_leaf_4:before {

  -webkit-transform: rotate(120deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(120deg) translate(0.12375rem, 0px);

          transform: rotate(120deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_5 {

  -webkit-animation: opacity-60-25-5-12 1.25s linear infinite;

          animation: opacity-60-25-5-12 1.25s linear infinite;

}

.weui_loading_leaf_5:before {

  -webkit-transform: rotate(150deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(150deg) translate(0.12375rem, 0px);

          transform: rotate(150deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_6 {

  -webkit-animation: opacity-60-25-6-12 1.25s linear infinite;

          animation: opacity-60-25-6-12 1.25s linear infinite;

}

.weui_loading_leaf_6:before {

  -webkit-transform: rotate(180deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(180deg) translate(0.12375rem, 0px);

          transform: rotate(180deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_7 {

  -webkit-animation: opacity-60-25-7-12 1.25s linear infinite;

          animation: opacity-60-25-7-12 1.25s linear infinite;

}

.weui_loading_leaf_7:before {

  -webkit-transform: rotate(210deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(210deg) translate(0.12375rem, 0px);

          transform: rotate(210deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_8 {

  -webkit-animation: opacity-60-25-8-12 1.25s linear infinite;

          animation: opacity-60-25-8-12 1.25s linear infinite;

}

.weui_loading_leaf_8:before {

  -webkit-transform: rotate(240deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(240deg) translate(0.12375rem, 0px);

          transform: rotate(240deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_9 {

  -webkit-animation: opacity-60-25-9-12 1.25s linear infinite;

          animation: opacity-60-25-9-12 1.25s linear infinite;

}

.weui_loading_leaf_9:before {

  -webkit-transform: rotate(270deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(270deg) translate(0.12375rem, 0px);

          transform: rotate(270deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_10 {

  -webkit-animation: opacity-60-25-10-12 1.25s linear infinite;

          animation: opacity-60-25-10-12 1.25s linear infinite;

}

.weui_loading_leaf_10:before {

  -webkit-transform: rotate(300deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(300deg) translate(0.12375rem, 0px);

          transform: rotate(300deg) translate(0.12375rem, 0px);

}

.weui_loading_leaf_11 {

  -webkit-animation: opacity-60-25-11-12 1.25s linear infinite;

          animation: opacity-60-25-11-12 1.25s linear infinite;

}

.weui_loading_leaf_11:before {

  -webkit-transform: rotate(330deg) translate(0.12375rem, 0px);

      -ms-transform: rotate(330deg) translate(0.12375rem, 0px);

          transform: rotate(330deg) translate(0.12375rem, 0px);

}

@-webkit-keyframes opacity-60-25-0-12 {

  0% {

    opacity: 0.25;

  }

  0.01% {

    opacity: 0.25;

  }

  0.02% {

    opacity: 1;

  }

  60.01% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-1-12 {

  0% {

    opacity: 0.25;

  }

  8.34333% {

    opacity: 0.25;

  }

  8.35333% {

    opacity: 1;

  }

  68.3433% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-2-12 {

  0% {

    opacity: 0.25;

  }

  16.6767% {

    opacity: 0.25;

  }

  16.6867% {

    opacity: 1;

  }

  76.6767% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-3-12 {

  0% {

    opacity: 0.25;

  }

  25.01% {

    opacity: 0.25;

  }

  25.02% {

    opacity: 1;

  }

  85.01% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-4-12 {

  0% {

    opacity: 0.25;

  }

  33.3433% {

    opacity: 0.25;

  }

  33.3533% {

    opacity: 1;

  }

  93.3433% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.25;

  }

}

@-webkit-keyframes opacity-60-25-5-12 {

  0% {

    opacity: 0.270958333333333;

  }

  41.6767% {

    opacity: 0.25;

  }

  41.6867% {

    opacity: 1;

  }

  1.67667% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.270958333333333;

  }

}

@-webkit-keyframes opacity-60-25-6-12 {

  0% {

    opacity: 0.375125;

  }

  50.01% {

    opacity: 0.25;

  }

  50.02% {

    opacity: 1;

  }

  10.01% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.375125;

  }

}

@-webkit-keyframes opacity-60-25-7-12 {

  0% {

    opacity: 0.479291666666667;

  }

  58.3433% {

    opacity: 0.25;

  }

  58.3533% {

    opacity: 1;

  }

  18.3433% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.479291666666667;

  }

}

@-webkit-keyframes opacity-60-25-8-12 {

  0% {

    opacity: 0.583458333333333;

  }

  66.6767% {

    opacity: 0.25;

  }

  66.6867% {

    opacity: 1;

  }

  26.6767% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.583458333333333;

  }

}

@-webkit-keyframes opacity-60-25-9-12 {

  0% {

    opacity: 0.687625;

  }

  75.01% {

    opacity: 0.25;

  }

  75.02% {

    opacity: 1;

  }

  35.01% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.687625;

  }

}

@-webkit-keyframes opacity-60-25-10-12 {

  0% {

    opacity: 0.791791666666667;

  }

  83.3433% {

    opacity: 0.25;

  }

  83.3533% {

    opacity: 1;

  }

  43.3433% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.791791666666667;

  }

}

@-webkit-keyframes opacity-60-25-11-12 {

  0% {

    opacity: 0.895958333333333;

  }

  91.6767% {

    opacity: 0.25;

  }

  91.6867% {

    opacity: 1;

  }

  51.6767% {

    opacity: 0.25;

  }

  100% {

    opacity: 0.895958333333333;

  }

}

　　flexible.min.js地址：http://files.cnblogs.com/files/gaihongxu/flexible.min.js

　　以下转载自（http://www.cnblogs.com/jr1993/p/4622039.html ）

　2.　

<div class="loading">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

</div>
.loading{

            width: 80px;

            height: 40px;

            margin: 0 auto;

            margin-top:100px;

        }

        .loading span{

            display: inline-block;

            width: 8px;

            height: 100%;

            border-radius: 4px;

            background: lightgreen;

            -webkit-animation: load 1s ease infinite;

        }

        @-webkit-keyframes load{

            0%,100%{

                height: 40px;

                background: lightgreen;

            }

            50%{

                height: 70px;

                margin: -15px 0;

                background: lightblue;

            }

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.2s;

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.4s;

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.6s;

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.8s;

        }

3.

<div class="loading">

        <span></span>

</div>
.loading{

            width: 150px;

            height: 4px;

            border-radius: 2px;

            margin: 0 auto;

            margin-top:100px;

            position: relative;

            background: lightgreen;

            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;

        }

        .loading span{

            display: inline-block;

            width: 16px;

            height: 16px;

            border-radius: 50%;

            background: lightgreen;

            position: absolute;

            margin-top: -7px;

            margin-left:-8px;

            -webkit-animation: changePosition 1.04s ease-in infinite alternate;

        }

        @-webkit-keyframes changeBgColor{

            0%{

                background: lightgreen;

            }

            100%{

                background: lightblue;

            }

        }

        @-webkit-keyframes changePosition{

            0%{

                background: lightgreen;

            }

            100%{

                margin-left: 142px;

                background: lightblue;

            }

        }

4.

<div class="loading">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

</div>
.loading{

            width: 150px;

            height: 15px;

            margin: 0 auto;

            margin-top:100px;

        }

        .loading span{

            display: inline-block;

            width: 15px;

            height: 100%;

            margin-right: 5px;

            border-radius: 50%;

            background: lightgreen;

            -webkit-animation: load 1.04s ease infinite;

        }

        .loading span:last-child{

            margin-right: 0px;

        }

        @-webkit-keyframes load{

            0%{

                opacity: 1;

            }

            100%{

                opacity: 0;

            }

        }

        .loading span:nth-child(1){

            -webkit-animation-delay:0.13s;

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.26s;

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.39s;

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.52s;

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.65s;

        }
.loading{

            width: 150px;

            height: 15px;

            margin: 0 auto;

            margin-top:100px;

        }

        .loading span{

            display: inline-block;

            width: 15px;

            height: 100%;

            margin-right: 5px;

            border-radius: 50%;

            background: lightgreen;

            -webkit-animation: load 1.04s ease infinite;

        }

        .loading span:last-child{

            margin-right: 0px;

        }

        @-webkit-keyframes load{

            0%{

                opacity: 1;

                -webkit-transform: scale(1.3);

            }

            100%{

                opacity: 0.2;

                -webkit-transform: scale(.3);

            }

        }

        .loading span:nth-child(1){

            -webkit-animation-delay:0.13s;

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.26s;

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.39s;

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.52s;

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.65s;

        }
.loading{

            width: 150px;

            height: 15px;

            margin: 0 auto;

            position: relative;

            margin-top:100px;

        }

        .loading span{

            position: absolute;

            width: 15px;

            height: 100%;

            border-radius: 50%;

            background: lightgreen;

            -webkit-animation: load 1.04s ease-in infinite alternate;

        }

        @-webkit-keyframes load{

            0%{

                opacity: 1;

                -webkit-transform: translate(0px);

            }

            100%{

                opacity: 0.2;

                -webkit-transform: translate(150px);

            }

        }

        .loading span:nth-child(1){

            -webkit-animation-delay:0.13s;

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.26s;

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.39s;

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.52s;

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.65s;

        }

5.

<div class="loading">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

</div>
.loading{

            width: 150px;

            height: 15px;

            margin: 0 auto;

            margin-top:100px;

            text-align: center;

        }

        .loading span{

            display: inline-block;

            width: 15px;

            height: 100%;

            margin-right: 5px;

            background: lightgreen;

            -webkit-animation: load 1.04s ease infinite;

        }

        .loading span:last-child{

            margin-right: 0px;

        }

        @-webkit-keyframes load{

            0%{

                opacity: 1;

            }

            100%{

                opacity: 0;

            }

        }

        .loading span:nth-child(1){

            -webkit-animation-delay:0.13s;

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.26s;

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.39s;

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.52s;

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.65s;

        }
.loading{

            width: 150px;

            height: 15px;

            margin: 0 auto;

            margin-top:100px;

        }

        .loading span{

            display: inline-block;

            width: 15px;

            height: 100%;

            margin-right: 5px;

            background: lightgreen;

            -webkit-transform-origin: right bottom;

            -webkit-animation: load 1s ease infinite;

        }

        .loading span:last-child{

            margin-right: 0px;

        }

        @-webkit-keyframes load{

            0%{

                opacity: 1;

            }

            100%{

                opacity: 0;

                -webkit-transform: rotate(90deg);

            }

        }

        .loading span:nth-child(1){

            -webkit-animation-delay:0.13s;

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.26s;

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.39s;

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.52s;

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.65s;

        }
.loading{

            width: 150px;

            height: 15px;

            margin: 0 auto;

            margin-top:100px;

        }

        .loading span{

            display: inline-block;

            width: 15px;

            height: 100%;

            margin-right: 5px;

            background: lightgreen;

            -webkit-transform-origin: right bottom;

            -webkit-animation: load 1s ease infinite;

        }

        .loading span:last-child{

            margin-right: 0px;

        }

        @-webkit-keyframes load{

            0%{

                opacity: 1;

                -webkit-transform: scale(1);

            }

            100%{

                opacity: 0;

                -webkit-transform: rotate(90deg) scale(.3);

            }

        }

        .loading span:nth-child(1){

            -webkit-animation-delay:0.13s;

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.26s;

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.39s;

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.52s;

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.65s;

        }

6.

<div class="loadEffect">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

</div>
.loadEffect{

            width: 100px;

            height: 100px;

            position: relative;

            margin: 0 auto;

            margin-top:100px;

        }

        .loadEffect span{

            display: inline-block;

            width: 16px;

            height: 16px;

            border-radius: 50%;

            background: lightgreen;

            position: absolute;

            -webkit-animation: load 1.04s ease infinite;

        }

        @-webkit-keyframes load{

            0%{

                opacity:;

            }

            100%{

                opacity: 0.2;

            }

        }

        .loadEffect span:nth-child(1){

            left:;

            top: 50%;

            margin-top:-8px;

            -webkit-animation-delay:0.13s;

        }

        .loadEffect span:nth-child(2){

            left: 14px;

            top: 14px;

            -webkit-animation-delay:0.26s;

        }

        .loadEffect span:nth-child(3){

            left: 50%;

            top:;

            margin-left: -8px;

            -webkit-animation-delay:0.39s;

        }

        .loadEffect span:nth-child(4){

            top: 14px;

            right:14px;

            -webkit-animation-delay:0.52s;

        }

        .loadEffect span:nth-child(5){

            right:;

            top: 50%;

            margin-top:-8px;

            -webkit-animation-delay:0.65s;

        }

        .loadEffect span:nth-child(6){

            right: 14px;

            bottom:14px;

            -webkit-animation-delay:0.78s;

        }

        .loadEffect span:nth-child(7){

            bottom:;

            left: 50%;

            margin-left: -8px;

            -webkit-animation-delay:0.91s;

        }

        .loadEffect span:nth-child(8){

            bottom: 14px;

            left: 14px;

            -webkit-animation-delay:1.04s;

        }
.loadEffect{

            width: 100px;

            height: 100px;

            position: relative;

            margin: 0 auto;

            margin-top:100px;

        }

        .loadEffect span{

            display: inline-block;

            width: 20px;

            height: 20px;

            border-radius: 50%;

            background: lightgreen;

            position: absolute;

            -webkit-animation: load 1.04s ease infinite;

        }

        @-webkit-keyframes load{

            0%{

                -webkit-transform: scale(1.2);

                opacity:;

            }

            100%{

                -webkit-transform: scale(.3);

                opacity: 0.5;

            }

        }

        .loadEffect span:nth-child(1){

            left:;

            top: 50%;

            margin-top:-10px;

            -webkit-animation-delay:0.13s;

        }

        .loadEffect span:nth-child(2){

            left: 14px;

            top: 14px;

            -webkit-animation-delay:0.26s;

        }

        .loadEffect span:nth-child(3){

            left: 50%;

            top:;

            margin-left: -10px;

            -webkit-animation-delay:0.39s;

        }

        .loadEffect span:nth-child(4){

            top: 14px;

            right:14px;

            -webkit-animation-delay:0.52s;

        }

        .loadEffect span:nth-child(5){

            right:;

            top: 50%;

            margin-top:-10px;

            -webkit-animation-delay:0.65s;

        }

        .loadEffect span:nth-child(6){

            right: 14px;

            bottom:14px;

            -webkit-animation-delay:0.78s;

        }

        .loadEffect span:nth-child(7){

            bottom:;

            left: 50%;

            margin-left: -10px;

            -webkit-animation-delay:0.91s;

        }

        .loadEffect span:nth-child(8){

            bottom: 14px;

            left: 14px;

             -webkit-animation-delay:1.04s;
　　　　}

最新文章

  1. Ubuntu搭建NFS
  2. 基于ZooKeeper的Dubbo注册中心
  3. HQL 参数绑定、唯一结果、分页、投影总结（下）
  4. 【斜率DP】BZOJ 3675:[Apio2014]序列分割
  5. Node.js 创建第一个应用
  6. 去掉cajviewer 右上角的“中国知网数字出版物超市
  7. 谷歌postman插件用不了的命令行指令
  8. Color the ball(树状数组+线段树+二分)
  9. centos 6.5 安装openssl
  10. TypeScript设计模式之解释器
  11. 芝麻HTTP：Python爬虫实战之抓取爱问知识人问题并保存至数据库
  12. 来了，老弟!__二进制部署kubernetes1.11.7集群
  13. Windows 更快捷方便的安装软件，命令提示符上安装 Chocolatey
  14. [BJOI2019]勘破神机
  15. Sass 增强语法的样式表
  16. 怎么让html中 还是显示&lt;button&gt; 而不进行编译
  17. Java 平时作业五
  18. 记录一次Struts s2-045重大安全漏洞修复过程
  19. SQL-触发器-011
  20. ionic 2.x 3.x项目结构解析

热门文章

  1. java安全沙箱（二）之.class文件检验器
  2. 同时使用Junit4的@Parameterized参数化测试和Spring容器
  3. Microsoft Visual Studio has encountered a problem
  4. Spring 5 新特性：函数式Web框架
  5. upgrade to ubuntu14.04, ibus input
  6. Java判断Class变量是什么类型
  7. GNU/Linux复习笔记(2)
  8. C#检测网卡和网络统计信息
  9. Java陷阱之assert关键字
  10. http请求提交cookie