Ajax Loading Style

CSS3 | Bootstrap

效果图

HTML

CSS

.front-loading{
    margin: 0 auto;
    width: 48px;
    height: 54px;
}

.front-loading-block{
    background-color:#3777BC;
    float:left;
    height:46px;
    margin-left:3px;
    width:12px;
    opacity:0.1;
    animation-name:bounceG;
    animation-duration:1.3s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    transform:scale(0.7);
}

.front-loading>div:nth-child(1) {
    animation-delay:0.39s;
}

.front-loading>div:nth-child(2) {
    animation-delay:0.52s;
}

.front-loading>div:nth-child(3) {
    animation-delay:0.65s;
}

@keyframes bounceG{
    from {
        transform:scale(1.2);
        opacity:1
    }

    to {
        transform:scale(0.7);
        opacity:0.1
    }
}

全屏Loading效果

效果图

HTML（使用Bootstrap3中的Modal）

click me


  

      

        

            

            

            

        
    
  

jQuery（垂直居中Modal）

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2

        $dialog.css("margin-top", offset - 15);
    }

    $('.modal').on('show.bs.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
})(jQuery);

全屏Loading插件

jQuery

(function ($) {
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2

        $dialog.css("margin-top", offset - 15);
    }

    $.showLoading = function(action) {
        var $loadingModal = $('#loading-modal'),
            html

        if (!$loadingModal.length) {
            html =
            [
                '
',
                    '
',
                        '
',
                            '
',
                                '
',
                                '
',
                                '
',
                            '
',
                        '
',
                    '
',
                '
'
            ].join("");

            $('body').append(html)

            $loadingModal = $('#loading-modal').on('show.bs.modal', centerModal);
        }

        if (action === "show") {
            $loadingModal.modal('show')
        }

        if (action === "reset") {
            $loadingModal.modal('hide')
        }
    }
})(jQuery);

调用方式

$.showLoading('show') // show

$.showLoading('reset') // hide

更多

5+ Online Loading AJAX Spinner Generator Tools

Vertically centering Bootstrap modal window