简单的css加载样式

最新推荐文章于 2023-02-08 00:00:00 发布

罗汉松驻扎的工作基地

最新推荐文章于 2023-02-08 00:00:00 发布

阅读量281

点赞数

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/117219652

版权

网站里面经常需要用到一个加载中的样式，例如转圈圈：

参考资料：

https://www.jq22.com/webqd3811

其实原始是做一个置顶的DIV ，用于盖住底下的编辑框，不然用户继续编辑。

这个置顶的div 加入一个转圈的css 。代码如下

首先是style代码：

.loader {
    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 500ms infinite linear;
    -webkit-animation: loader 500ms infinite linear;
    animation: loader 500ms 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 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:transparent;
    -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;
}

然后编辑html 和 js


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MYL</title>

    <link href="~/Contents/LoadingCSS.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

    <script type="text/javascript">

        window.onload = function () {

            //hide first
            $('div.is-loading').hide();

            //after 3s ,then show();
            setTimeout(function () {
                $('div.is-loading').show();
            }, 3000);

        }

    </script>
     
</head>
<body>
    <div> 
        <p>my loading page</p>
        <p>
            <input type="text" />
        </p>
        <p>
            <input type="text" />
        </p>
        <p>
            <input type="text" />
        </p>
        <p>
            <input type="text" />
        </p>
        <p>
            <input type="text" />
        </p>
        <p>
            <input type="text" />
        </p>
        <p>
            <input type="text" />
        </p>

    </div>

    <div class="is-loading">
        <div class="curtain">
            <div class="loader">
            </div>
        </div>
    </div>

</body>
</html>

可以看到div.is-loading 就是用来显示加载圈圈的: .curtain代表窗帘 ; .loader代表圈圈 ;

js就是负责控制 show 和 hide

罗汉松驻扎的工作基地

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的css加载样式

网站里面经常需要用到一个加载中的样式，例如转圈圈：参考资料：https://www.jq22.com/webqd3811其实原始是做一个置顶的DIV ，用于盖住底下的编辑框，不然用户继续编辑。这个置顶的div 加入一个转圈的css 。代码如下首先是style代码：.loader { position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2em; text...
复制链接

扫一扫