loading 菊花转

发布于 2017-04-06  259 次阅读


方法一 css3绘制

引入 jquery 和 loading.jsloading.css

<link rel="stylesheet" href="http://static.mxpeng.cn/17-8-10/loading.css">
<script src="http://static.mxpeng.cn/17-8-10/loading.js"></script>

使用方法

$.ajax(ajaxCommon.buildLoadingOption({
  url: url,
  dataType: "json",
  ...
  success: function () {}
)}

loading.js 和 loading.css 的内容

  • loading.js
var ajaxCommon = {
    loadingHtml: '<div class="loader" id="loadingImgBox" style="width:100px;height:100px;position: absolute;left: 0;right:0;top:0;bottom:0;margin:auto;background:rgba(0,0,0,0.6);border-radius: 5px;text-align: center;color: #fff;line-height: 100px;">' +
    '<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>',

    buildLoadingOption: function (option) {
        var _this = this;
        var loadingAjaxOption = {
            beforeSend: function () {
                $("#loadingImgBox").remove();
                $('body').append(_this.loadingHtml);
            },
            complete: function () {
                $("#loadingImgBox").remove();
            },
            error: function () {
                $("#loadingImgBox").remove();
            }
        };

        for (var key in option) {
            loadingAjaxOption[key] = option [key];
        }
        return loadingAjaxOption;
    }
}
  • loading.css
.loader{
  width: 100%;
  height: 100%;
  position: relative;
}
.loader span{
  display: block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  position: absolute;
  bottom: 10px;
  left: 0;
  color: #fff;
  text-align: center
}
@-webkit-keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3; }

  100% {
    opacity: 1; } }

@keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3; }

  100% {
    opacity: 1; } }

.line-spin-fade-loader {
  position: absolute;
  left: 45px;
  top: 40px;
}
.line-spin-fade-loader > div:nth-child(1) {
  top: 20px;
  left: 0;
  -webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(2) {
  top: 13.63636px;
  left: 13.63636px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(3) {
  top: 0;
  left: 20px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(4) {
  top: -13.63636px;
  left: 13.63636px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(5) {
  top: -20px;
  left: 0;
  -webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(6) {
  top: -13.63636px;
  left: -13.63636px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(7) {
  top: 0;
  left: -20px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(8) {
  top: 13.63636px;
  left: -13.63636px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; }
.line-spin-fade-loader > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  width: 5px;
  height: 15px; }

方法二 用gjf图

  • js
loadingImg();//菊花转
/**
 *菊花转
 **/
function loadingImg(){
    var _PageHeight = document.documentElement.clientHeight,
            _PageWidth = document.documentElement.clientWidth;
    //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px)
    var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
            _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
    //在页面未加载完毕之前显示的loading Html自定义内容
    var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:rgba(0,0,0,.4);z-index:10000;display: none"><div style="position: absolute; cursor1: wait; left:0;right:0; top:0;bottom:0;margin:auto; width: 50px; height: 50px; background:  url(../lib/images/loadingImg.gif) no-repeat scroll 5px 10px;"></div></div>';
    //呈现loading效果
    $('body').append(_LoadingHtml)
}


beforeSend:function(){
  $("#loadingDiv").show();
},

error:function(){
  $("#loadingDiv").hide();
},
complete:function(){
  $("#loadingDiv").hide();
}
  • 图片

如果ajax双层嵌套,最外层的不能有,否则内层的不能执行

让系统中所有ajax请求都陪伴“菊花转”

让系统中所有ajax请求都陪伴“菊花转”

让系统中所有ajax请求都陪伴"菊花转"


梦想还是要有的,万一实现了呢