标签：jquery web loading body box 转圈 html property 加载

jquery的加载转圈

参考：https://blog.csdn.net/qq_40000351/article/details/103028675

直接贴代码：

		// 加载圈
		/**
     *  数据加载动态圈风格
     * @param property 参数对象
     *  property 参数对象详细属性设置↓
     * type (start,stop) 加载或停止转圈
     * content 加载提示内容
     * shadowColor 背景阴影颜色-建议使用带透明的颜色
     * loadingBoxColor  加载背景色
     * loadingPointColor  转圈点颜色
     * loadingContentColor  加载提示内容字体颜色
     */
      function initLoading(property) {
        $("body .loading-box-shadow-omg").remove();//清除加载图层
        if(property.type=="stop"){
            return;
        }
        var nodeHtml = '<div class="loading-box-shadow-omg"><div class="loading-box">';
        nodeHtml += '<div class="loading-circle"></div><div class="loading-content"></div></div></div>';
        $("body").append(nodeHtml);//加载布局元素
        var html = '<div style="top: 5%;left: 53%;width: 5px;height: 5px;"></div>';
        html += '<div style="top: 11%;left: 30%;width: 7px; height: 7px;"></div>';
        html += '<div style="top: 26%;left: 12%;width: 9px;height: 9px;"></div>';
        html += '<div style="top: 48%;left: 7%;width: 9px;height: 9px;"></div>';
        html += '<div style="top: 70%;left: 15%;width: 9px;height: 9px;"></div>';
        html += '<div style="top: 85%;left: 33%;width: 9px;height: 9px;"></div>';
        html += '<div style="top: 89%;left: 54%;width: 9px;height: 9px;"></div>';
        html += '<div style="top: 80%;left: 75%;width: 9px;height: 9px;"></div>';
        $("body .loading-circle").html(html);
        var content = "正在加载中...";//提示内容
        if(property.content){
            content = property.content;
        }
        $("body .loading-content").text(content);
        var shadowColor = "#211f1f5c";//阴影颜色
        if(property.shadowColor){
            shadowColor = property.shadowColor;
            $('body .loading-box-shadow-omg').css("background-color",shadowColor);
        }
        var loadingBoxColor = "white";//加载框背景色
        if(property.loadingBoxColor){
            loadingBoxColor = property.loadingBoxColor;
            $('body .loading-box-shadow-omg .loading-box').css("background-color",loadingBoxColor);
        }
        var loadingPointColor = "#292961";//动态点颜色
        if(property.loadingPointColor){
            loadingPointColor = property.loadingPointColor;
            $('body .loading-box-shadow-omg .loading-circle>div').css("background-color",loadingPointColor);
        }
        var loadingContentColor = "rebeccapurple";//提示内容颜色
        if(property.loadingContentColor){
            loadingContentColor = property.loadingContentColor;
            $('body .loading-box-shadow-omg .loading-content').css("color",loadingContentColor);
        }
    };

html body{
    margin: 0;
    padding: 0;
}

/*动态加载圈-loading-start*/
body .loading-box-shadow-omg{
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    background-color: #211f1f5c;
    position: absolute;
    top: 0;
    z-index: 9999999;
}

.hidden{
    display: none!important;
}

body .loading-box-shadow-omg .loading-box{
    background-color: white;
    border-radius: 5px;
    position: absolute;
    top: 20%;
    left: 40%;
    width: 20%;
    height: 25%;
}

body .loading-box-shadow-omg .loading-box .loading-circle{
    width: 80px;
    height: 80px;
    background-color: transparent;
    position: absolute;
    left: 35%;
    top: 10%;
    animation: init-circle 1s linear infinite;
}

body .loading-box-shadow-omg .loading-box .loading-content{
    position: absolute;
    bottom: 5%;
    font-weight: bold;
    color: rebeccapurple;
    width: 100%;
    text-align: center;
}

body .loading-box-shadow-omg .loading-box .loading-circle>div{
    background-color: #292961;
    border-radius: 20px;
    position: absolute;
}

@keyframes init-circle {
    from{
        transform: rotate(360deg);
    }
    to{
        transform: rotate(0deg);
    }
}
/*动态加载圈-loading-stop*/

标签：jquery,web,loading,body,box,转圈,html,property,加载
来源： https://www.cnblogs.com/Mz1-rc/p/15969225.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。