zoukankan      html  css  js  c++  java
  • 好用的纯CSS加载动画-spinkit

     首先放一个css  spinkit

    <style>
        .loaders{
        width: 100%;
        height: 100%;
        padding: 100px;
        box-sizing: border-box;
    }
    .loader{
        width: 250px;
        height: 200px;
        float: left;
    }
    </style>
            <div class="loaders">
              <div class="loader">
                <div class="loader-inner ball-pulse">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-grid-pulse">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-clip-rotate">
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-clip-rotate-pulse">
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner square-spin">
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-clip-rotate-multiple">
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-pulse-rise">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-rotate">
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner cube-transition">
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-zig-zag">
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-zig-zag-deflect">
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-triangle-path">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-scale">
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner line-scale">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner line-scale-party">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-scale-multiple">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-pulse-sync">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-beat">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner line-scale-pulse-out">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner line-scale-pulse-out-rapid">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-scale-ripple">
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-scale-ripple-multiple">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-spin-fade-loader">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner line-spin-fade-loader">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner triangle-skew-spin">
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner pacman">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner semi-circle-spin">
                  <div></div>
                </div>
              </div>
              <div class="loader">
                <div class="loader-inner ball-grid-beat">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <div class="loader">
            <div class="loader-inner ball-scale-random">
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
            </div>

    预览图:

  • 相关阅读:
    ajax
    前端学数据库之子查询
    读书笔记:《HTML5开发手册》Web表单
    阅读《编写可读代码的艺术》笔记
    windows环境下sublime的nodejs插件详细安装图解
    有关css3的一些问题
    前面的话
    gulp思考
    10种排序算法分析
    ajax异步请求
  • 原文地址:https://www.cnblogs.com/xueweijie/p/7007417.html
Copyright © 2011-2022 走看看