加载屏三个圆圈动画

最新推荐文章于 2024-06-07 11:15:24 发布

技术项目经理

最新推荐文章于 2024-06-07 11:15:24 发布

阅读量319

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_43837268/article/details/100019358

版权

CSS 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
        /*数据加载动画*/
        .loader--style3 {
            max-width: 640px;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            z-index: 10000;
            display: block;
        }

        svg {
            margin-top: 20%;
        }

        .loding-div {
            text-align: center;
            border-radius: 20px;
            width: 200px;
            height: 200px;
            margin: auto;
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .loader-middle{
            position: absolute;
            top: 35%;
            left: 50%;
            margin-left: -0.4em;
            margin-top: -0.4em;

        }
        .loader-inner {
            position: relative;
        }

        .outer,
        .middle,
        .inner {
            border: 3px solid transparent;
            border-top-color: #FEB101;
            border-right-color: #FEB101;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        .outer {
            width: 3.5em;
            height: 3.5em;
            margin-left: -1.75em;
            margin-top: -1.75em;
            animation: spin 2s linear infinite;
        }

        .middle {
            width: 2.1em;
            height: 2.1em;
            margin-left: -1.05em;
            margin-top: -1.05em;
            animation: spin 1.75s linear reverse infinite;
        }

        .inner {
            width: 0.8em;
            height: 0.8em;
            margin-left: -0.4em;
            margin-top: -0.4em;
            animation: spin 1.5s linear infinite;
        }
        .bottom-title{
            position: absolute;
            bottom: 35%;
            text-align: center;
            width: 100%;
        }
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="app">
    </div>
    <div class="loader loader--style3" id='login'>
        <div class="loding-div">
            <div class="loader-middle">
                <div class="loader-inner">
                    <div class="outer"></div>
                    <div class="middle"></div>
                    <div class="inner"></div>
                </div>
            </div>
            <div class="bottom-title">请稍后...</div>
        </div>
    </div>
</body>

</html>