css变量实现进度条效果

朝阳39

已于 2024-07-10 11:10:12 修改

阅读量455

点赞数 2

分类专栏： # 已归档链接 # CSS 文章标签： css css3 前端

于 2021-10-28 09:53:43 首次发布

原文链接：https://demo.cssworld.cn/new/8/3-1.php

版权

已归档链接同时被 2 个专栏收录

283 篇文章 14 订阅

订阅专栏

CSS

148 篇文章 9 订阅

订阅专栏

本文介绍了如何利用CSS计数器和变量来动态显示元素的进度值，通过`counter-reset`和`content`属性结合计算，创建了带有进度条和百分比值的可视化展示。代码示例中展示了三种不同进度的条形图，宽度根据CSS变量`--percent`的值动态变化，并在右侧显示相应的百分比。这种方法为前端开发中的动态数据显示提供了一种简洁的解决方案。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<label>图片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片3：</label>
<div class="bar" style="--percent: 20;"></div>

.bar {
    height: 20px; width: 300px;
    background-color: #f2f2f2;
}
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    display: block;
    width: calc(100% * var(--percent) / 100);
    font-size: 12px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

借助CSS计数器在页面中显示CSS变量的值
counter(progress)'%\2002’这里的\2002表示空格，主要是为了让进度值文字内容和进度条右侧边缘之间有一定的距离。

核心代码

.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    width: calc(100% * var(--percent) / 100);

朝阳39

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css变量实现进度条效果

<label>图片1：</label><div class="bar" style="--percent: 60;"></div><label>图片2：</label><div class="bar" style="--percent: 40;"></div><label>图片3：</label><div class="bar" style="--percent: 20;.
复制链接

扫一扫

专栏目录