进度条

最新推荐文章于 2024-02-20 15:09:54 发布

hy0909

最新推荐文章于 2024-02-20 15:09:54 发布

阅读量149

点赞数

分类专栏： Html&&css

本文链接：https://blog.csdn.net/hy0909/article/details/79624305

版权

Html&&css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们看到一些项目的加载时总会出现一些炫酷的进度条，具体怎么实现的，小编在这里给大家一些建议，话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <title>linear-gradient</title>
    <style type="text/css">
        *{margin:0;padding:0;font-family:"微软雅黑";}
        .progress{margin:100px auto;width:80%;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border-radius:4px;
            height:20px;overflow:hidden;background-color: #f5f5f5;}
        .progress-bar{float:left;width:0;height:100%;line-height:20px;color:#fff;text-align:center;
            background-color: #666;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);}
        .progress-bar-striped{width:100px;height:100px;border:1px solid #ccc;
            background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
            background-size:40px 40px;
        }
    </style>
</head>
<body style="background: #000">
<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:30%">30%</div>
</div>

</body>
</html>

hy0909

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
进度条

我们看到一些项目的加载时总会出现一些炫酷的进度条，具体怎么实现的，小编在这里给大家一些建议，话不多说，直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head &gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;linear-gradient&lt;/title&a
复制链接

扫一扫