javascript - 使用纯javascript自定义加载动画

Question

我正在制作一个用于加载动画的插件。这是我的例子:

let loading = document.getElementsByClassName('loading')[0];

let width = +loading.style.width.split('px')[0], x = width / 50;

let O = {};
for (let i = 0; i <= 50; i++) {
    O[i] = {
        left: `0`,
        width: `${i * x}px`
    }
}

for (let i = 50, m = 1; i > 0; i-- , m++) {
    O[m + 50] = {
        left: `${m * x}px`,
        width: `${(i - 1) * x}px`
    }
}

let style = document.createElement('style');

let css = '';

for (let o in O) {
    let c = O[o];
    
    css += `${o}% { margin-left: ${c.left}; width: ${c.width} }`;
}

style.innerHTML = `@keyframes loading{ ${css} }`;

document.head.appendChild(style);

loading.style.animation = 'loading 2s infinite';

.container {
    width: 200px;
    height: 3px;
    background-color: rgba(0,0,0,.12);
}

.loading {
    height: 3px;
    background-color: #f00;
}

<div class="container">
    <div class="loading" style="width: 200px;"></div>
</div>

它正在工作。我想通过扩展容器宽度并保持加载宽度(仍然是 200px)来升级此插件。

let loading = document.getElementsByClassName('loading')[0];

let width = +loading.style.width.split('px')[0], x = width / 50;

let O = {};
for (let i = 0; i <= 50; i++) {
    O[i] = {
        left: `0`,
        width: `${i * x}px`
    }
}

for (let i = 50, m = 1; i > 0; i--, m++) {
    O[m + 50] = {
        left: `${m * x}px`,
        width: `${(i - 1) * x}px`
    }
}

let style = document.createElement('style');

let css = '';

for (let o in O) {
    let c = O[o];
    
    css += `${o}% { margin-left: ${c.left}; width: ${c.width} }`;
}

style.innerHTML = `@keyframes loading{ ${css} }`;

document.head.appendChild(style);

loading.style.animation = 'loading 2s infinite';

.container {
    width: 300px;
    height: 3px;
    background-color: rgba(0,0,0,.12);
}

.loading {
    height: 3px;
    background-color: #f00;
}

<div class="container">
    <div class="loading" style="width: 200px;"></div>
</div>

如何让它跑到容器尾部？

我的默认示例更简单，因为加载宽度等于容器宽度。因此，通过 width/50(两次)将宽度拆分为多个 block (最小宽度)。

现在，如果容器宽度为300，加载宽度仍为200。怎么拆分？

谢谢!

Answer 1

我的想法:将容器宽度分成 3 部分:

                50%
|----------|-----|-----|----------|
{ loading1 }{ 1 }{  2  }{ loading2 }

m变量在加载宽度 ( 1 ) 满后启用并增加。

内部 2 , 如果 m * z + loading_width < max_left (loading2 大于加载宽度(默认为 200))，保持宽度不变。否则，减小宽度。

此外，因为第二个循环不会在 100% 处停止，我已经将该字段单独添加到 css 中:

100% { margin-left: 0; width: 0; }

let container = document.getElementsByClassName('container')[0];

let loading = document.getElementsByClassName('loading')[0];

let container_width = +container.style.width.split('px')[0];

let loading_width = +loading.style.width.split('px')[0];

let max_left = container_width - (container_width - loading_width);

let z = container_width / 50;

let O = {};

let m = 1;

for (let i = 0; i <= 50; i++) {
    if (i * z <= loading_width) {
        O[i] = {
            left: `0`,
            width: `${i * z}px`
        }
    } else {
        O[i] = {
            left: `${m++ * z}px`,
            width: `${loading_width}px`
        }
    }    
}

for (let i = 50, k = 51, n = 1; i > 0; i-- , k++ , n++) {
    if (m * z + loading_width <= max_left) {
        O[n + 50] = {
            left: `${m++ * z}px`,
            width: `${loading_width}px`
        }
        
    } else {
        O[n + 50] = {
            left: `${m * z}px`,
            width: `${container_width - (m * z)}px`
        }

        if (!(container_width - m * z)) {
            break;
        }

        m++
    }
}

let style = document.createElement('style');

let css = '';

for (let o in O) {
    let c = O[o];
    
    css += `${o}% { margin-left: ${c.left}; width: ${c.width} }`;
}

style.innerHTML = `@keyframes loading{ ${css} 100% { margin-left: 0; width: 0; } }`;

document.head.appendChild(style);

loading.style.animation = 'loading 2s infinite';

.container {
    height: 3px;
    background-color: rgba(0,0,0,.12);
}

.loading {
    height: 3px;
    background-color: #f00;
}

<div class="container" style="width: 300px;">
    <div class="loading" style="width: 200px;"></div>
</div>