要实现一个炫酷的JavaScript loading效果，可以按照以下步骤进行：
第一步：编写HTML结构
<div id="loading-wrapper">
<div id="loading-text">Loading...</div>
<div id="loading-bar">
<div id="loading-bar-inner"></div>
</div>
</div>
第二步：编写CSS样式
#loading-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0; /* 背景颜色 */
z-index: 9999; /* z-index为最高，让loading界面浮在页面最上层 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#loading-text {
font-size: 28px; /* 文本字体大小 */
margin-top: 20px;
}
#loading-bar {
width: 70%;
height: 6px;
background-color: #ccc; /* 进度条底色 */
margin-top: 20px;
position: relative;
}
#loading-bar-inner {
width: 0;
height: 100%;
background-color: #67c6f3; /* 进度条颜色 */
position: absolute;
left: 0;
top: 0;
transition: all 1.5s ease-in-out; /* 进度条过渡动画效果 */
}
第三步：编写JavaScript脚本
// 获取进度条元素
var progressBar = document.getElementById('loading-bar-inner');
// 设置定时器，每隔一段时间增加进度条长度，实现进度条动画
var timer = setInterval(function() {
// 获取当前进度条长度
var width = parseInt(progressBar.style.width) || 0;
// 设置每次增加的长度
var step = Math.floor(Math.random() * 5) + 1;
// 当进度条达到100%时清除定时器
if (width >= 100) {
clearInterval(timer);
// 延时一段时间后隐藏loading界面
setTimeout(function() {
var loadingWrapper = document.getElementById('loading-wrapper');
loadingWrapper.style.display = 'none';
}, 500);
} else {
// 增加进度条长度
progressBar.style.width = (width + step) + '%';
}
}, 100);
以上就是一个基本的JavaScript loading效果的完整攻略。
以下是两个示例，网址：demo1.html，demo2.html
- 示例1
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Demo1</title>
<style>
#loading-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0; /* 背景颜色 */
z-index: 9999; /* z-index为最高，让loading界面浮在页面最上层 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#loading-text {
font-size: 28px; /* 文本字体大小 */
margin-top: 20px;
}
#loading-bar {
width: 70%;
height: 6px;
background-color: #ccc; /* 进度条底色 */
margin-top: 20px;
position: relative;
}
#loading-bar-inner {
width: 0;
height: 100%;
background-color: #67c6f3; /* 进度条颜色 */
position: absolute;
left: 0;
top: 0;
transition: all 1.5s ease-in-out; /* 进度条过渡动画效果 */
}
</style>
</head>
<body>
<div id="loading-wrapper">
<div id="loading-text">Loading...</div>
<div id="loading-bar">
<div id="loading-bar-inner"></div>
</div>
</div>
<script>
// 获取进度条元素
var progressBar = document.getElementById('loading-bar-inner');
// 设置定时器，每隔一段时间增加进度条长度，实现进度条动画
var timer = setInterval(function() {
// 获取当前进度条长度
var width = parseInt(progressBar.style.width) || 0;
// 设置每次增加的长度
var step = Math.floor(Math.random() * 5) + 1;
// 当进度条达到100%时清除定时器
if (width >= 100) {
clearInterval(timer);
// 延时一段时间后隐藏loading界面
setTimeout(function() {
var loadingWrapper = document.getElementById('loading-wrapper');
loadingWrapper.style.display = 'none';
}, 500);
} else {
// 增加进度条长度
progressBar.style.width = (width + step) + '%';
}
}, 100);
</script>
</body>
</html>
- 示例2
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Demo2</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#loading-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0; /* 背景颜色 */
z-index: 9999; /* z-index为最高，让loading界面浮在页面最上层 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#loading-text {
font-size: 28px; /* 文本字体大小 */
margin-top: 20px;
}
#loading-bar {
width: 70%;
height: 6px;
background-color: #ccc; /* 进度条底色 */
margin-top: 20px;
position: relative;
}
#loading-bar-inner {
width: 0;
height: 100%;
background-color: #67c6f3; /* 进度条颜色 */
position: absolute;
left: 0;
top: 0;
transition: all 1.5s ease-in-out; /* 进度条过渡动画效果 */
}
</style>
</head>
<body>
<div id="loading-wrapper">
<div id="loading-text">Loading...</div>
<div id="loading-bar">
<div id="loading-bar-inner"></div>
</div>
</div>
<script>
// 获取进度条元素
var progressBar = $('#loading-bar-inner');
// 设置定时器，每隔一段时间增加进度条长度，实现进度条动画
var timer = setInterval(function() {
// 获取当前进度条长度
var width = parseInt(progressBar.width()) || 0;
// 设置每次增加的长度
var step = Math.floor(Math.random() * 5) + 1;
// 当进度条达到100%时清除定时器
if (width >= 100) {
clearInterval(timer);
// 延时一段时间后隐藏loading界面
setTimeout(function() {
var loadingWrapper = $('#loading-wrapper');
loadingWrapper.hide();
}, 500);
} else {
// 增加进度条长度
progressBar.width(width + step + '%');
}
}, 100);
</script>
</body>
</html>
在这两个示例中，我们在Demo2中使用了jQuery库，将js中的原生DOM操作改写为jQuery的操作。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：很酷的javascript loading效果代码 - Python技术站
微信扫一扫 
支付宝扫一扫 