原生 JavaScript 实现 Win8 风格旋转圆圈进度条

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>仿win8等待进度条</title>
<style>
body {
    margin: 0;
    padding: 0;
    background: #333; /* 深色背景使白色圆点更明显 */
    overflow: hidden;
}
</style>
</head>
<body>
<script>
/* 
 * 准备条件：
 * 弧度角度转换公式：弧度=Math.PI*角度/180;
 * 圆x轴坐标: Math.cos(Math.PI * 角度/ 180) * 半径 + 圆心x
 * 圆y轴坐标: Math.sin(Math.PI * 角度/ 180) * 半径 + 圆心y
 */

// 圆点元素类
function ProgressBarWin8() {
    this.fixed = { left: 0, top: 0 };      // 圆心相对屏幕坐标
    this.position = { left: 0, top: 0 };   // 当前圆点坐标
    this.radius = 70;                      // 圆半径
    this.angle = 270;                      // 起始角度（顶部）
    this.delay = 30;                       // 基础定时器延迟
    this.timer = null;
    this.dom = null;
    
    // 圆点样式配置
    this.style = {
        position: "absolute",
        width: "10px",
        height: "10px",
        background: "#fff",
        "border-radius": "5px"
    };
}

ProgressBarWin8.prototype = {
    // 运动主方法
    run: function() {
        if (this.timer) clearTimeout(this.timer);

        // 1. 重新计算坐标
        this.position.left = Math.cos(Math.PI * this.angle / 180) * this.radius + this.fixed.left;
        this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius + this.fixed.top;
        
        // 2. 应用样式
        this.dom.style.left = this.position.left + "px";
        this.dom.style.top = this.position.top + "px";

        // 3. 角度递增
        this.angle++;

        // 4. 动态调整速度（关键特效逻辑）
        if (this.position.left < this.fixed.left) {
            this.delay += 0.5;
        } else {
            this.delay -= 0.5;
        }

        var scope = this;
        // 5. 延迟执行
        this.timer = setTimeout(function () {
            scope.run();
        }, this.delay);
    },

    // 初始化 DOM 与位置
    defaultSetting: function () {
        this.dom = document.createElement("span");
        for (var property in this.style) {
            this.dom.style[property] = this.style[property];
        }
        
        // 定位到屏幕中心
        this.fixed.left = window.innerWidth / 2;
        this.fixed.top = window.innerHeight / 2;
        
        // 计算并放置初始位置
        this.position.left = Math.cos(Math.PI * this.angle / 180) * this.radius + this.fixed.left;
        this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius + this.fixed.top;
        this.dom.style.left = this.position.left + "px";
        this.dom.style.top = this.position.top + "px";
        
        document.body.appendChild(this.dom);
        return this;
    }
};

// 全局变量
var progressArray = []; // 存储生成的圆点对象
var tempArray = [];     // 辅助重置数组
var timer = 200;        // 间隔多少毫秒生成一个圆点

// 创建圆点对象实例
for (var i = 0; i < 5; ++i) {
    progressArray.push(new ProgressBarWin8().defaultSetting());
}

// 数组扩展each方法，用于统一处理数组内对象的属性重置
Array.prototype.each = function (fn) {
    for (var i = 0, len = this.length; i < len;) {
        fn.call(this[i++], arguments);
    }
};

// 窗口尺寸改变时，更新所有圆点的圆心坐标以居中
window.onresize = function () {
    tempArray.each(function () {
        this.fixed.left = window.innerWidth / 2;
        this.fixed.top = window.innerHeight / 2;
    });
};

// 启动动画引擎：定时从队列取出一个对象开始运行
var startTimer = setInterval(function () {
    if (progressArray.length <= 0) {
        clearInterval(startTimer);
    } else {
        var entity = progressArray.shift();
        tempArray.push(entity); // 存入暂存区以便resize重算
        entity.run();           // 开始运动
    }
}, timer);

</script>
</body>
</html>