<!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" id="m-speed">
<input type="button" value="显示loading" id="m-btn">
</div>
<div class="m-loading-wrapper" id="m-loading">
<div class="m-loading" id="m-loading-inner"></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>