Native JS achieves LOADING effect

Native JS achieves LOADING effect

This article mainly introduces the LOADING effect Code implemented by native JS, which has very good results and can customize the color and speed. We recommend it to you and hope you will like it.

 

 

Pure text loading effect, you can customize the color and speed

 

The Code is as follows:

/** Loading animation
* Created by と on 15/03/11.
*/

Function loading (element, lightColor, darkColor, speed, callback ){
If (! Element &&(! Element. innerText |! Element. textContent) return
Element = typeof element = "string "? Document. getElementById (element): element
LightColor = lightColor | "# fff", darkColor = darkColor | "#000", speed = speed || 300

Var arr_spanEles = new Array ()

! Function (arr_elementText ){
Element. innerText = element. textContent = ""
For (var I = 0; I <arr_elementText.length; I ++ ){
Var span = document. createElement ("span ")
Element. innerText? Span. innerText = arr_elementText [I]: span. textContent = arr_elementText [I]
Element. appendChild (span)
Arr_spanEles.push (span)
}
} (Element. innerText | 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)
}

 

The above is all the content described in this article. I hope it will be helpful for you to learn javascript.