css中审核图标,一个简单实用的css loading图标

摘要

在web开发中，为了提高用户体验，在加载数据的时候都会给一个loading的提示。

Html

.cssload-container {

width: 24px;

height: 24px;

position: fixed;

top: 260px;

left: 50%;

margin-left: -12px;

}

.cssload-speeding-wheel {

width: 60px;

height: 60px;

margin: 0 auto;

border: 2px solid rgba(0,0,0,0.25);

border-radius: 50%;

border-left-color: transparent;

border-right-color: transparent;

animation: cssload-spin 575ms infinite linear;

-o-animation: cssload-spin 575ms infinite linear;

-ms-animation: cssload-spin 575ms infinite linear;

-webkit-animation: cssload-spin 575ms infinite linear;

-moz-animation: cssload-spin 575ms infinite linear;

}

@keyframes cssload-spin {

100% {

transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-o-keyframes cssload-spin {

100% {

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-ms-keyframes cssload-spin {

100% {

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes cssload-spin {

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-moz-keyframes cssload-spin {

100% {

-moz-transform: rotate(360deg);

transform: rotate(360deg);

}

}    

function showLoading() {

$(".cssload-container").show();

};        function hideLoading() {

$(".cssload-container").hide();

};        var times = 1;

setInterval(function () {            if (times % 2 === 0) {

hideLoading();

} else {

showLoading();

};

times++;

}, 2000)    

效果

把需要的css贴过去，然后把这段代码放在需要显示的页面上

控制显示与隐藏的jsfunction showLoading() {

$(".cssload-container").show();

};

function hideLoading() {

$(".cssload-container").hide();

};