CSS加载条

最新推荐文章于 2024-04-27 17:15:07 发布

Float544

最新推荐文章于 2024-04-27 17:15:07 发布

阅读量378

点赞数

分类专栏：学习心得文章标签： css3

本文链接：https://blog.csdn.net/qq_56392992/article/details/124391716

版权

学习心得专栏收录该内容

162 篇文章 0 订阅

订阅专栏

    <style>
        body {
            background-color: gray;
        }

        .loading-box {
            margin: 100px auto;
            height: 150px;
            width: 250px;
        }

        .loading {
            height: 20px;
            width: 100%;
            border-radius: 10px;
            border: 1px solid green;
            position: relative;
        }

        .loading::before {
            content: '';
            display: block;
            position: absolute;
            width: 0%;
            height: 100%;
            background-color: red;
            top: 0;
            left: 1px;
            border-radius: 10px;
            animation: load 2s linear infinite;
        }

        @keyframes load {
            from {
                width: 0%;
            }

            to {
                width: 100%;
            }
        }

        p {
            font-size: 20px;
            color: green;
            text-align: center;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="loading-box">
        <div class="loading">
        </div>
        <p>Loading...</p>
    </div>
</body>

Float544

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS加载条

<style> body { background-color: gray; } .loading-box { margin: 100px auto; height: 150px; width: 250px; } .loading { height: 20px; ...
复制链接

扫一扫