<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #ff6a00;
border-radius: 50%;
animation: spin 1s infinite linear;
}
.text {
margin-top: 10px;
font-size: 16px;
color: #666;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading" style="display:block">
<div class="spinner"></div>
<div class="text">Loading...</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 加载动画
function showLoading() {
var loading = document.querySelector('.loading');
loading.style.display = 'flex';
}
// 关闭/隐藏动画
function hideLoading() {
var loading = document.querySelector('.loading');
loading.style.display = 'none';
}
</script>
</body>
</html>
CSS3实现的正在加载动画效果
最新推荐文章于 2024-05-30 10:50:01 发布