使用纯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（两次）。

现在，如果容器宽度为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; }

＆＃13;

＆＃13;

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';

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;