当前位置:网站首页>简单的loading动画
简单的loading动画
2022-07-07 15:40:00 【梓喻】
样式
.page-loading{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.page-loading-div{
width: 100%;
height: 100px;
position: absolute;
top: 50%;
left: 0;
margin-top: -50px;
}
.page-loading-box{
width: 100px;
height: 100px;
line-height: 100px;
font-size: 80px;
color: rgba(255,255,255,0.4);
text-align: center;
margin: 0 auto;
border-radius: 100px;
overflow: hidden;
opacity: 0.8;
position: relative;
background-color: rgba(255,255,255,0.2);
}
.page-loading-box .glyphicon{
line-height: 100px;
animation-name: rotate360;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 1.4s;
}
.page-loading-text{
line-height: 100px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 14px;
color: #fff;
text-align: center;
}
.page-loading-text>span{
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 2s;
}
.page-loading-text>span:nth-of-type(1){
animation-name: pointShine1;
}
.page-loading-text>span:nth-of-type(2){
animation-name: pointShine2;
}
.page-loading-text>span:nth-of-type(3){
animation-name: pointShine3;
}
@keyframes rotate360 {
0%{
transform: rotate(0);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes pointShine1 {
0% {
opacity: 0;
}
32% {
opacity: 1;
}
96% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes pointShine2 {
0% {
opacity: 0;
}
32% {
opacity: 0;
}
64% {
opacity: 1;
}
96% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes pointShine3 {
0% {
opacity: 0;
}
64% {
opacity: 0;
}
96% {
opacity: 1;
}
100% {
opacity: 0;
}
}
代码类
/** * loading动画 */
function Loading() {
this.loadings = [];
// this.loadingHtml = '<div class="page-loading">'
this.loadingHtml = '<div class="page-loading-div">'
+ '<div class="page-loading-box">'
+ '<i class="glyphicon glyphicon-refresh"></i>'
+ '<div class="page-loading-text">加载中<span>.</span><span>.</span><span>.</span></div>'
+ '</div>'
+ '</div>'
// + '</div>';
}
Loading.prototype.doLoading = function(){
let code = Math.floor(Math.random() * 100000);
this.loadings.push(code);
let bodyDom = document.getElementsByTagName('body');
if(bodyDom.length > 0){
let childsDoms = bodyDom[0].childNodes;
let isInsert = false;
if(childsDoms && childsDoms.length > 0){
for(var i = 0; i< childsDoms.length; i++){
let childDom = childsDoms[i];
let className = childDom && childDom.className;
className = className != null && className != undefined ? className : '';
if(className.indexOf('page-loading') >= 0){
isInsert = true;
}
}
}
if(!isInsert){
var DIV = document.createElement("DIV");
DIV.className = 'page-loading';
DIV.innerHTML = this.loadingHtml;
bodyDom[0].appendChild(DIV);
}
}
return code;
}
Loading.prototype.removeLoadingDom = function() {
let bodyDom = document.getElementsByTagName('body');
if(bodyDom.length > 0){
let childsDoms = bodyDom[0].childNodes;
if(childsDoms && childsDoms.length > 0){
for(var i = 0; i< childsDoms.length; i++){
let childDom = childsDoms[i];
// console.log(childDom, childDom.className);
let className = childDom && childDom.className;
className = className != null && className != undefined ? className : '';
if(className.indexOf('page-loading') >= 0){
bodyDom[0].removeChild(childDom);
}
}
}
}
}
Loading.prototype.closeLoading = function(code){
let {
loadings } = this;
if(loadings && loadings.length > 0){
let index = loadings.indexOf(code);
if(index > -1){
loadings.splice(index, 1);
}
}
if(loadings && loadings.length == 0){
this.removeLoadingDom();
}
}
Loading.prototype.closeAllLoading = function() {
this.loadings = [];
this.removeLoadingDom();
}
Loading.prototype.getLoadings = function() {
let {
loadings } = this;
return loadings && loadings.length > 0 ? loadings : [];
}
Loading.prototype.checkIsInLoading = function(code){
let {
loadings } = this;
return loadings && loadings.length > 0 && loadings.indexOf(code) > -1;
}
使用
let loading = new Loading();
let loadCode = loading.doLoading();
setTimeout(function() {
loading.closeLoading(loadCode);
}, 2000)
效果
边栏推荐
猜你喜欢
赋能智慧电力建设 | 麒麟信安高可用集群管理系统,保障用户关键业务连续性
Mrs offline data analysis: process OBS data through Flink job
测试用例管理工具推荐
【网络攻防原理与技术】第6章:特洛伊木马
《世界粮食安全和营养状况》报告发布:2021年全球饥饿人口增至8.28亿
User defined view essential knowledge, Android R & D post must ask 30+ advanced interview questions
如何在博客中添加Aplayer音乐播放器
[image sensor] correlated double sampling CDs
麒麟信安加入宁夏商用密码协会
Is AI more fair than people in the distribution of wealth? Research on multiplayer game from deepmind
随机推荐
99% 用户在 Power BI 云端报表常犯错误
策略模式 - Unity
SIGGRAPH 2022最佳技术论文奖重磅出炉!北大陈宝权团队获荣誉提名
【可信计算】第十一次课:TPM密码资源管理(三) NV索引与PCR
Mrs offline data analysis: process OBS data through Flink job
Repair method of firewall system crash and file loss, material cost 0 yuan
【视频/音频数据处理】上海道宁为您带来Elecard下载、试用、教程
本周小贴士#140:常量:安全习语
Reflections on "product managers must read: five classic innovative thinking models"
rpcms获取指定分类下的文章的方法
如何在博客中添加Aplayer音乐播放器
麒麟信安携异构融合云金融信创解决方案亮相第十五届湖南地区金融科技交流会
数值 - number(Lua)
赋能智慧电力建设 | 麒麟信安高可用集群管理系统,保障用户关键业务连续性
Flash build API Service - generate API documents
L1-023 输出GPLT(Lua)
[source code interpretation] | source code interpretation of livelistenerbus
本周小贴士#134:make_unique与私有构造函数
防火墙系统崩溃、文件丢失的修复方法,材料成本0元
A tour of grpc:03 - proto serialization / deserialization