纯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>
相关推荐
ai小鬼头13 分钟前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz13 分钟前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子16 分钟前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边16 分钟前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客17 分钟前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb88819 分钟前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家19 分钟前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试