惊艳的彩虹进度条

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

在用户心目中，优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。以前我在发布一款产品的第一版时，登录验证的 loading... 延迟是 2-3秒，结果当天反馈邮箱就被用户挤爆了，大部分用户都认为这几秒是一个界面突然卡住是 软件BUG ，其实只是我们 验证登录信息 而已，所以如果没有 加载动画 告知用户我们在验证登录信息而只是让软件卡住不动的话，这是一种 非常不好的用户体验 ，虽然早期用户可能会给你的产品第二次机会，但绝大多数人对这款产品失去信息，不再使用，导致用户大量流失。

解决方案：使用 加载动画，提供 即使反馈，减少用户焦虑

加载动画分类：进度条加载动画，无限循环加载动画 和 骨架图加载动画

优秀的加载动画特征

1. 核心是 减少动画时间
2. 给出 具体时间
3. 告诉用户 为什么需要等待
4. 让等待的过程不那么让人无聊 使用有趣的动画
5. 减少用户等待时间的心理感知 色彩、某个相关知识、某条产品操作教学
6. 透传公司品牌形象 公司理念、公司价值观、公司的标志吉祥物

最终效果

一、添加 HTML 文件

1. html 部分非常的简单，只需要添加一个类名为 percentage 的 div
2. 主要动画部分，我们用 canvas 来实现

<div class="percentage"></div>

二、添加 CSS 文件

先初始化页面

1. 设置 * 为 box-sizing: border-box
2. 设置 body 来使整个项目居中

* {
    box-sizing: border-box;
}

body {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

主要的 CSS 代码

.percentage {
    position: relative;
    top: 80px;
    color: #ffffff;
    font-weight: 600;

}

canvas {
    background: #181818;
    box-shadow: 0 0 0 1px #282828;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

三、添加 JS 文件

const percentage = document.querySelector('.percentage');
var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    width = 400,
    height = 100,
    loaded = 0,
    loaderSpeed = 0.6,
    loaderWidth = 310,
    loaderHeight = 16,
    loaderX = width / 2 - loaderWidth / 2,
    loaderY = height / 2 - loaderHeight / 2,
    particles = [],
    particleLift = 180,
    particleRate = 4,
    hueStart = 0,
    hueEnd = 120,
    hue = 0,
    gravity = 0.12,
    dpr = window.devicePixelRatio;

document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;
canvas.style.width = (width / dpr) + 'px';
canvas.style.height = (height / dpr) + 'px';
ctx.globalCompositeOperation = 'lighter';

function rand(rMi, rMa) {
    return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
}

function updateLoader() {
    if (loaded < 100) {
        loaded += loaderSpeed;
    } else {
        loaded = 0;
    }
}

function renderLoader() {
    ctx.fillStyle = '#000';
    ctx.fillRect(loaderX, loaderY, loaderWidth, loaderHeight);

    hue = hueStart + (loaded / 100) * (hueEnd - hueStart);

    var newWidth = (loaded / 100) * loaderWidth;
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 40%, 1)';
    ctx.fillRect(loaderX, loaderY, newWidth, loaderHeight);

    ctx.fillStyle = '#444';
    ctx.fillRect(loaderX, loaderY, newWidth, loaderHeight / 2);
}

function Particle() {
    this.x = loaderX + ((loaded / 100) * loaderWidth) - rand(0, 1);
    this.y = height / 2 + rand(0, loaderHeight) - loaderHeight / 2;
    this.vx = (rand(0, 4) - 2) / 100;
    this.vy = (rand(0, particleLift) - particleLift * 2) / 100;
    this.width = rand(1, 4) / 2;
    this.height = rand(1, 4) / 2;
    this.hue = hue;
}

Particle.prototype.update = function (i) {
    this.vx += (rand(0, 6) - 3) / 100;
    this.vy += gravity;
    this.x += this.vx;
    this.y += this.vy;

    if (this.y > height) {
        particles.splice(i, 1);
    }
};

Particle.prototype.render = function () {
    ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + rand(50, 70) + '%, ' + rand(20, 100) / 100 + ')';
    ctx.fillRect(this.x, this.y, this.width, this.height);
};

function createParticles() {
    var i = particleRate;
    while (i--) {
        this.particles.push(new Particle());
    }
}

function updateParticles() {
    var i = particles.length;
    while (i--) {
        var p = particles[i];
        p.update(i);
    };
}

function renderParticles() {
    var i = particles.length;
    while (i--) {
        var p = particles[i];
        p.render();
    }
}

function clearCanvas() {
    ctx.clearRect(0, 0, width, height);
}

function add() {
    let percentageWidth = parseInt(loaded);
    percentage.innerText = `${percentageWidth}%`;

}


function loop() {
    requestAnimationFrame(loop);
    clearCanvas();
    createParticles();
    updateLoader();
    updateParticles();
    add();
    renderLoader();
    renderParticles();
}

loop();

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。