html+css+小图标,HTML+CSS入门 一个简单实用的CSS loading图标

本篇教程介绍了HTML+CSS入门 一个简单实用的CSS loading图标，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<

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

Html

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贴过去，然后把这段代码放在需要显示的页面上

控制显示与隐藏的js

function showLoading() {

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

};

function hideLoading() {

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

};

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！