纯css进度条,简单美观实用。

css

css 复制代码
    .card-progress-bar{
        width: 80%;
    }
    .bar{
        height: 20px;
        width: 90%;
        background-color: #D7E4EF;
    }
    .bar::before{
        display: block;
        counter-reset: progress var(--precent);
        content: counter(progress) '%';
        width: calc(1% * var(--precent));
        color: #D7E4EF;
        background-color: #4193F7;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
    }

html:在style里给 "--precent"赋值,就能显示对应百分比。

html 复制代码
       <div class="card-progress-bar">
          <div class="bar" style="--precent:93;"></div>
      </div>
相关推荐
一只毛驴几秒前
谈谈浏览器的DOM事件-从0级到2级
前端·面试
用户8168694747252 分钟前
封装ajax
前端
pengzhuofan3 分钟前
Web开发系列-第13章 Vue3 + ElementPlus
前端·elementui·vue·web
yvvvy3 分钟前
白嫖 React 性能优化?是的,用 React.memo!
前端·javascript
火车叼位11 分钟前
GSAP 动画开发者的终极利器:像素化风格 API 速查表
前端
袁煦丞31 分钟前
全球热点一键抓取!NewsNow:cpolar内网穿透实验室第630个成功挑战
前端·程序员·远程工作
qq_4591317034 分钟前
前端面试问题
前端
拾光拾趣录1 小时前
从“祖传”构造函数到 `class`
前端·javascript
wmm_会飞的@鱼1 小时前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
yvvvy1 小时前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript