js 加载动画

html

<div id="loading" style="text-align: center;">
    <div class="loader" style="position: absolute;top: 50%;left: 50%;margin: -75px 0 0 -75px;width: 150px;height: 150px;" title="loading...">
        <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="-100px" y="0px" width="150px" height="150px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
        <path fill="#00cec9" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
          <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"></animateTransform>
        </path>
      </svg>
        <h4 id="information" style="color: #fff;font-size: large;">loading</h4>
    </div>
</div>

body {
	background-color:#636e72;
}

/*-------------------------------------------配置参数----------------------------------------*/
var data_group = new Array("loading", "loading.", "loading..", "loading..."); //需要的数组字符串
var ID = "information"; //操作ID
var speed = 400; //执行速率
var Endvalue = 4; //结束值
var startvalue = 0; //初始值
/*--------------------------------------------运算器----------------------------------------*/
num = startvalue;
var t = setInterval(function() {
    num++;
    if (num == Endvalue) {
        num = 0;
    }
    //执行内容
    document.getElementById(ID).innerHTML = data_group[num];

}, speed);

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8299.html