Youtube Loading Effect

Youtube的Loading動畫

by ShadowKao

HTML

<script src="https://malsup.github.io/jquery.blockUI.js"></script>
  <div class="container">
        <input type="button" value="call block UI" id="btnBlockUI" />
    </div>
    <div>
        <input type="button" value="unBlockUI" id="btnUnblockUI" />
    </div>

CSS

body {
            background-color: aliceblue;
        }

        .container {
            width: 400px;
            height: 200px;
        }
        /*上面兩個樣式不是重點*/

        /*背景底*/
        /*加!important覆寫原本樣式*/
        .blockOverlay {
            background-color: #fff !important; /*白色底，視自己需求看要不要加*/
            cursor: default !important; /*預設游標*/
        }
        /*loading icon*/
        .blockMsg {
            width: 100px; /*width、height改變圓的直徑大小*/
            height: 100px;
            display: inline-block !important;
            animation: container-rotate 1568ms linear infinite;
        }

        .spinner-layer {
            height: 100%;
            animation: fill-unfill-rotate 5332ms cubic-bezier(0.4,0,0.2,1) infinite both;
        }

        .circle-clipper {
            display: inline-block;
            position: relative;
            width: 50%;
            height: 100%;
            overflow: hidden;
        }

            .circle-clipper .circle {
                box-sizing: border-box;
                width: 200%;
                border-width: 7px; /*線條粗細*/
                border-style: solid;
                border-color: #4285f4;
                border-bottom-color: transparent !important;
                border-radius: 50%;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
            }

            .circle-clipper.left .circle {
                left: 0;
                border-right-color: transparent !important;
                animation: left-spin 1333ms cubic-bezier(0.4,0,0.2,1) infinite both
            }

            .circle-clipper.right .circle {
                border-left-color: transparent !important;
                animation: right-spin 1333ms cubic-bezier(0.4,0,0.2,1) infinite both
            }

        /*定義動畫*/
        @keyframes container-rotate {
            to {
                transform: rotate(360deg)
            }
        }

        @keyframes...

JavaScript

$("#btnBlockUI").click(function () {
                $('div.container').block({ message: null });
                /*加入一些DOM*/
                $(".blockMsg").append(
                    "<div class='spinner-layer'>" +
                    "<div class='circle-clipper left'>" +
                    "<div class='circle'></div>" +
                    "</div>" +
                    "<div class='circle-clipper right'>" +
                    "<div class='circle'></div>" +
                    "</div>" +
                    "</div>");

                //Page Block寫法↓
                //$.blockUI({ message: null });
                //setTimeout(function () {
                //$.unblockUI();
                //}, 2000);
            });

            $("#btnUnblockUI").click(function () {
                $('div.container').unblock();
            });