progress-bar写进度条

mh的63

于 2019-08-11 01:24:04 发布

阅读量249

点赞数

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

本文链接：https://blog.youkuaiyun.com/baidu_39048029/article/details/99133044

版权

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS创建并实现进度条的动画效果。通过设置不同的宽度百分比，可以直观展示任务完成状态。同时，利用@keyframes定义动画，使进度条在页面加载时平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

progress-bar写进度条

效果图如下：
在这里插入图片描述

<div class="progress">
                <div class="progress-bar" style="width: 5%;"></div>
            </div>

#basic-information span{
    font-size: 18px;
    color: #484848;
}
#basic-information .progress{
    height: 10px;
    background: #dce0e0 ;
}
#basic-information .progress .progress-bar{
    border-radius: 20px;
    background-color: #008489;
    animation: animate-positive 2s;
    height: 10px;
}
@-webkit-keyframes animate-positive{
    0% { width: 0; }
}
@keyframes animate-positive{
    0% { width: 0; }
}