网页loading效果可以通过js控制旋转速度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>网页loading效果 可以通过js控制旋转速度</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .m-loading-wrapper {
        z-index: 90;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -16px;
        margin-top: -16px;
         32px;
        height: 32px;
        overflow: hidden;
        display: none;
        transform: rotate(270deg);
    }

    .m-loading {
        position: absolute;
        left: 0px;
        top: 0px;
         32px;
        height: 96px;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAADACAMAAACDB5U0AAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAEHRSTlMAUQwWSGr/BSODz+iYN7ioo0T1UwAABSpJREFUeNrtmouSozgMRbFlYfn9/387FoaIJFAYU7s7W5Vb3ZOkMzrIliD2JdNPf79UCOpJPMxV8ABADKC7UakUOgLolHRPvPbz7OEbYI1SxvaMO4Qwu28AqUroAdg4VwR9ArSqgNQ3c5xC+QQkVaWnLrm5Esw7ADi+obqmMczZvgGMMjyFnVKcAu4B1JOAlZbLNQUPAtDmbQaPM0nZO9qecwqutXKAtYTwaihz1FG2BB88ru8spYTtZLK7ElqqLJWOAd6HrNZS1nZkGEBrwq2EwP3ItKMhBM+IuLxpciF5D4yB5ZG7gWlwWD3nlyS8g5NZ3sJPT6oUQ0McZNiyZyWYzmXaTBR7cHzDg1eGLpoBawIhHgOq6LobwflCx0OQwV8g7El2HeHjApGeTmX1Sx9ZmiwqUsSTQrLMezHzTl5qcFAHIQwCzOvno4G6hqBOhzDpgUn85wRndNsXjtEdn+7J0DVCq1hixtMa0EV8cqXEWE4A5upqQC28HA8Brq5HgLGG19+jj0C5Ip6Og1p4QVpeIb7SkLUFmbWLjj4XXMs+rVeVGNHyn+3b2sJS6+N0DChx+/zE6BwDQCng0lTRlgy/SIczGBW8njsXTaUiInOSMpI2JHl+csWyWAFYX2pE5Ed4P+rliWBiBaRJAG19AlOntKvCSQDy+d4nxQnQDtC7wtjPoJreAbZrjSMz6GAPuLfKAk4gTZ+AKfWmoFsTfgE0V7IDIKeBAJpAlkZ9EsCAngNkODT99NNPz2W8N0/iQTbiY6JQRbejYqQPgPgKHdI5hKy/AdA2ctcC3vPgNyD2+inWhYqgTwBxfOm7rHMK8ROQb/gxGCrBvAMUxzO1bxrXnZ8ArG/b8E4pTkHtAcgJYL9/wDv5DALgEs7+YtFNJeOrZ3ge3Vp7WEtoLvyD6LPPuL6zlFJvJxMsJTz1DwTA+yWzdlMIhWF6+YdHQFf+ARWfGeFSa/xIb2e16vAPMC9JZISDNWSXf0CuJVFo2D9I60w88A9U8dm7R/4B5vi/9A/0U/8g7kQD/kEsEl9cp39wDhjwD1IUOXroH9j/3j/Q0zP/QDnUD/wD46KLatw/wMg7nmH/AB0r4ph/oJVbDu9G/YMaykJaN5r6pn+wjr7RAdHJTF74BwKIbtvXGURUtvnB3f4BOvEPsCrJoW/7B6ol0A494B8krKJJAHf9A45XkwDu+geGASCAu/4BcLyZBNDnH4gUA7QAbvsHrYQCuO0ftBIK4L5/IH0igBH/QACjklYeFxnz8w9++umR5P6TGQ6Wjfi4yFfR7SjnthhgAMhasouli/dF7wFih3QNB3jPg98A125Fd2jZedEOIF8qiH2XdU7BfQLK3O/HIKeQ3gGm3Y3vky4VEO0eYJfvA+h+/ypnr/YA5ATUJLrYlMVKKCCNBKEmkKVQJ/0jK9S0llL71sqOE0gvoypkOrtNpLTMY9HbyQRLCTfzn72AfHmjKnsfxT+oTbiWUPmZ5Y9vlTUEtcZfHmVIpj3Oi4I5vdVYERH1d35LUePcdGrKEZaGOPwPKbRwr65vWLqjBH3LHu2Ff1ATKHgKiDB+09aEuaS+c8GeoOlv9g+S22nEP3B7YZ9/cAqIOOIfOBH+/AMwqB74BzZhlRn2D0hxvDOj/oHCRWrQPzDYlOyYf4BN29e30l3/QLXsSbZoN/0DJdnLJvGOfwAKk943PT3wDwwHPPAPSFWN+gdiFgz6B3K4Qf9ABjziH0gJh/0DKfq4f8C1f+QfQEo//+Cnf1t/AFGZQwaktm6jAAAAAElFTkSuQmCC");
        background-size: 32px 96px;
    }
    </style>
</head>

<body>
    <div>
        设置速度：
        <input type="input" value="100" >
        <input type="button" value="显示loading" >
    </div>
    <div class="m-loading-wrapper" >
        <div class="m-loading" ></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var myAction = {},
            index = 1,
            loadingImgInterval,
            loadingInterval;
        var dom = {
            btn: $('#m-btn'),
            speed: $('#m-speed'),
            loading: $('#m-loading'),
            loadingInner: $('#m-loading-inner')
        };

        $.extend(myAction, {
            loadingFn: function(that) {
                dom.loading.show();
                var topArr = [0, -32, -64];
                var rotateArr = [0, 90, 180, 270];
                var topIndex = 0;
                var rotateIndex = 0;
                var speed = dom.speed.val() - 0;
                clearInterval(loadingImgInterval);
                loadingImgInterval = setInterval(function() {
                    if (topIndex >= 3) {
                        topIndex = 0;
                        if (rotateIndex >= 4) {
                            rotateIndex = 0;
                        }
                        dom.loading.css({ transform: 'rotate(' + rotateArr[rotateIndex] + 'deg)' });
                        rotateIndex++;
                    }
                    dom.loadingInner.css({ 'top': topArr[topIndex] });
                    topIndex++;
                }, speed);

                clearInterval(loadingInterval);
                loadingInterval = setInterval(function() {
                    dom.loading.hide();
                    dom.loading.css({ transform: 'rotate(' + 270 + 'deg)' });
                    dom.loadingInner.css({ 'top': 0 });
                    clearInterval(loadingImgInterval);
                    clearInterval(loadingInterval);
                }, 5000);
            },
            initEvent: function() {
                dom.btn.on('click', function() {
                    var that = $(this);
                    myAction.loadingFn(that);
                });
            }
        });

        var init = function() {
            myAction.initEvent();
        }();
    })
    </script>
</body>

</html>
网页loading效果 可以通过js控制旋转速度

相关推荐

网页loading效果可以通过js控制旋转速度
