Javascript前端加载等待圆型圈提示实现效果

CSS内容

#loading {background-color: #9f9f9f;opacity: 0.15;height: 100%;width: 100%;position: fixed;z-index: 1;margin-top: 0px;top: 0px;
}#loading-center {width: 100%;height: 100%;position: relative;
}#loading-center-absolute {position: absolute;left: 50%;top: 50%;height: 200px;width: 200px;margin-top: -100px;margin-left: -100px;-ms-transform: rotate(-135deg);-webkit-transform: rotate(-135deg);transform: rotate(-135deg);
}.object {-moz-border-radius: 50% 50% 50% 50%;-webkit-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;position: absolute;border-top: 5px solid #fff;border-bottom: 5px solid transparent;border-left: 5px solid #fff;border-right: 5px solid transparent;-webkit-animation: animate 2s infinite;animation: animate 2s infinite;
}#object_one {left: 75px;top: 75px;width: 50px;height: 50px;
}#object_two {left: 65px;top: 65px;width: 70px;height: 70px;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;
}#object_three {left: 55px;top: 55px;width: 90px;height: 90px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;
}#object_four {left: 45px;top: 45px;width: 110px;height: 110px;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;
}@-webkit-keyframes animate {50% {-ms-transform: rotate(360deg) scale(0.8);-webkit-transform: rotate(360deg) scale(0.8);transform: rotate(360deg) scale(0.8);}
}@keyframes animate {50% {-ms-transform: rotate(360deg) scale(0.8);-webkit-transform: rotate(360deg) scale(0.8);transform: rotate(360deg) scale(0.8);}
}

HTML内容

<div id="loading" style="display:none;" ><div id="loading-center"><div id="loading-center-absolute"><div class="object" id="object_two"></div><div class="object" id="object_one"></div></div></div>
</div>

Javascript内容

/*** @function 触发遮罩层*/
function LayerShow() {   $("#loading").css("display","block");
}/*** @function 隐藏遮罩层*/
function LayerHide() {$("#loading").css("display","none");
}

参考文章：https://blog.csdn.net/rzrenyu/article/details/73826067

Javascript前端加载等待圆型圈提示实现效果相关推荐

Javascript模块加载捆绑器Browserify Webpack和SystemJS用法
Javascript模块加载捆绑器Browserify Webpack和SystemJS用法转自 http://www.jdon.com/idea/js/javascript-module-load ...
7.JavaScript异步加载与加载时间线
JavaScript异步加载与加载时间线上一篇 JavaScript浅层克隆和深层克隆下一篇 JavaScript事件处理模型 - 事件冒泡,捕获文章目录 JavaScript异步加载与加载时间 ...
HTML 中 JavaScript 的加载方式
HTML中 JavaScript 的加载方式前言相信各位前端的小伙伴都用过script元素,今天我们就来好好聊一聊它. script元素将JavaScript插入HTML的主要方法是使用〈〉元素 ...
WPF 加载等待动画
WPF 加载等待动画原文:WPF 加载等待动画版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_29844879/article/detail ...
浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
JavaScript动态加载js文件
/********************************************************************** JavaScript动态加载js文件* 说明:* 之前没 ...
IOS开发UI篇之──自定义加载等待框（MBProgressHUD）
这里介绍一下网友开源的MBProgressHUD类,实现等待框, 一.网上下载 MBProgessHUD 类文件,直接导入到工程即可二.示例分析在我的工程中示例如下: 1)在ShowImageV ...
WBLoadingIndicatorView（加载等待动画)
中文说明基于CALayer封装加载等待动画,目前支持6种类型动画: typedef NS_ENUM(NSInteger, WBLoadingAnimationType) { WBLoadingAni ...
c3等待加载样式 vue_Vue.js__简易加载等待动画
Vue.js__简易加载等待动画Vue实现为览或讲琐了过自系一读页围这就多网解元当维自加,加载动画的样式取自其他出处,侵直分调浏器代,刚求的一学础过功互有解小久宗点差维含数删. 将Vue属性览或讲琐了 ...

Javascript前端加载等待圆型圈提示实现效果

Javascript前端加载等待圆型圈提示实现效果

CSS内容

HTML内容

Javascript内容

Javascript前端加载等待圆型圈提示实现效果相关推荐

最新文章

热门文章