加载页面增加一个loading

最新推荐文章于 2024-06-25 10:37:03 发布

shawemou

最新推荐文章于 2024-06-25 10:37:03 发布

阅读量1.3k

点赞数 3

分类专栏： js

本文链接：https://blog.csdn.net/shawemou/article/details/81095532

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.设置css(如果写入css文件,就要在html引入css)

<style>
   .loader {
    //这个注解会影响到页面中<a>和<button>的点击事件
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -0.2em 0 0 -0.2em;
    text-indent: -9999em;
    border-top: 0.3em solid rgba(0, 0, 0, 0.1);
    border-right: 0.3em solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
    border-left: 0.3em solid #555;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-animation: loader 300ms infinite linear;
    -webkit-animation: loader 300ms infinite linear;
    animation: loader 300ms infinite linear;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 2em;
    height: 2em;
}

.curtain {
    //这个注解会影响到页面中<a>和<button>的点击事件
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    //注意-->这个地方的图片是一个半透明图片--->后面会给大家
    background-image: url(../image/IMG20180718112933.png);
    -moz-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    z-index: 0;
    overflow: hidden;
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes loader {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.is-loading {
    overflow: hidden;
}

.is-loading .curtain {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    z-index: 99;
}

.is-loading .loader {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
}
</style>

2,给body增加class

<body  class="is-loading">

3.body下放入下面这个标签

<div id="mycurtain" >
    <div id="myloader" >
    </div>
</div>

4.js加入移除loading效果

 window.onload=function(){
    $("body").addClass("is-loading")
    $("#mycurtain").addClass("curtain")
    $("#myloader").addClass("loader")

    $('body').removeClass('is-loading');
    $("#mycurtain").removeClass("curtain")
    $("#myloader").removeClass("loader") 
  }

5.效果如下
这里写图片描述

半透明图片下载
如若没有积分,回复邮箱,发给你们

shawemou

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
加载页面增加一个loading

1.设置css(如果写入css文件,就要在html引入css)&amp;amp;amp;lt;style&amp;amp;amp;gt; .loader { position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2em; text-indent: -9999em; border-top: 0.3em solid rgba(...
复制链接

扫一扫

专栏目录