很酷的javascript loading效果代码

2023年6月11日上午12:48 • JavaScript

要实现一个炫酷的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技术站