jquery实现页面等待加载“转圈圈”效果 |
您所在的位置：网站首页 › 推特登录转圈圈怎么弄 › jquery实现页面等待加载“转圈圈”效果 |
jquery实现页面等待加载“转圈圈”效果
|
jquery实现页面等待加载“转圈圈”效果
A little of BB：看了不少前端框架，寻思着自己diy封一个加载转圈圈的效果，以后在项目上节省时间(“懒”就一个字)，话不多说，ctrl v出来见真章 1.js全部源码，loading.js /** * 数据加载动态圈风格 * @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 = ''; nodeHtml += ''; $("body").append(nodeHtml);//加载布局元素 var html = ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; $("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); } }; initLoading({ type:"start", content:"loading...", // shadowColor:"grey", // loadingBoxColor:"yellow", // loadingPointColor:"green", // loadingContentColor:"red" });2.css全部源码,loading.css(ps:gif图都不用找UI了，嘿嘿，不过肯定没UI的精美) 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*/3.html全部源码,loading.html hello3.效果图 4.调用initLoading方法时，可以自定义阴影遮盖颜色，转圈圈颜色等设置，属性设置方面，见js注释 initLoading({ type:"start", content:"loading...", // shadowColor:"grey", // loadingBoxColor:"yellow", // loadingPointColor:"green", // loadingContentColor:"red" });5.源码下载：https://download.csdn.net/download/qq_40000351/11972437 6.我没秃，但我始终有一颗变强的心！ 7.转载需注明出处，盗版必究。 |
【本文地址】
今日新闻 |
推荐新闻 |