原生JS实现LOADING效果

这段原生JavaScript代码打造了一个极具魅力的加载效果，它的表现让人眼前一亮，而且色彩和速度都可以自定义，这绝对是一个值得分享的好东西。

下面就是实现这一炫酷效果的代码：

```javascript

// 由黑与白的印记在15/03/11创建的加载动画

function loading(element, lightColor, darkColor, speed, callback) {

// 检查传入元素是否存在并且具有文本内容

if (!element || (!elementnerText && !element.textContent)) return;

element = typeof element === "string" ? document.getElementById(element) : element;

// 如果没有传入颜色则默认为白色和黑色，速度没有传入则默认为300毫秒

lightColor = lightColor || "fff"; darkColor = darkColor || "000"; speed = speed || 300;

var arr_spanEles = []; // 用于存储分割后的文本元素

// 通过自执行函数将文本内容分割成单个字符并创建span元素添加到DOM中

!function(arr_elementText) {

elementnerText = element.textContent = ""; // 清空元素文本内容

for (var i = 0; i < arr_elementText.length; i++) {

var span = document.createElement("span");

elementnerText ? spannerText = arr_elementText[i] : span.textContent = arr_elementText[i]; // 根据浏览器兼容性设置span的文本内容

element.appendChild(span); // 将span添加到元素中

arr_spanEles.push(span); // 将span元素存入数组

}

}((elementnerText || element.textContent).split("")); // 将元素文本内容分割成字符数组并传入自执行函数

var index = -1, length = arr_spanEles.length; // 定义索引和长度变量用于控制动画过程

var loadingTimer = setInterval(function() { // 设置定时器控制加载动画的循环播放

arr_spanEles[Math.max(index, 0)].style.color = darkColor; // 将当前字符颜色设置为暗色

if (index == length - 1) { // 如果已经播放到最后一个字符则重置索引并执行回调函数

index = -1;

callback && callback();

}

++index; // 增加索引以播放下一个字符的动画效果

arr_spanEles[index].style.color = lightColor; // 将下一个字符的颜色设置为亮色，形成闪烁效果

}, speed); // 设置动画的速度间隔，单位为毫秒

}

```

以上就是我们今天分享的JavaScript加载动画的全部内容，希望各位在JavaScript的学习和实践中能得到启发和帮助。让我们期待更多精彩的JavaScript代码分享吧！如果你喜欢这篇文章，不妨通过调用 `cambrian.render('body')` 来表达你的喜爱之情。