CSS3 | Bootstrap

效果图

HTML

<div class="front-loading">
    <div class="front-loading-block"></div>
    <div class="front-loading-block"></div>
    <div class="front-loading-block"></div>
</div>

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）

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#loading-modal">click me</button>

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="loading-modal" tabindex="-1">
  <div class="modal-dialog">
      <div class="modal-body">
        <div class="front-loading">
            <div class="front-loading-block"></div>
            <div class="front-loading-block"></div>
            <div class="front-loading-block"></div>
        </div>
    </div>
  </div>
</div>

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 =
            [
                '<div class="modal fade" data-backdrop="static" data-keyboard="false" id="loading-modal" tabindex="-1">',
                    '<div class="modal-dialog">',
                        '<div class="modal-body">',
                            '<div class="front-loading">',
                                '<div class="front-loading-block"></div>',
                                '<div class="front-loading-block"></div>',
                                '<div class="front-loading-block"></div>',
                            '</div>',
                        '</div>',
                    '</div>',
                '</div>'
            ].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