【HTML】纯CSS+DIV变量在静态饼图与进度条上的使用

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2023年7月26日 12:27 本文热度 492

在项目中，会出现圆形静态饼图或进度条的形式展现当前的进度；或者根据倒计时的进度，展示进度条的剩余比例；这里使用css的变量，结合css的样式来展示进度的情况，也可结合javascript给该css的变量赋值；

案例一：静态饼图的应用

静态饼图的效果示意图如下：

实现的代码如下：

<style>
.pie-simple {
   width: 128px; height: 128px;
    background-color: #eee;
    border-radius: 50%;
    text-align: left;    overflow: hidden;
}
.pie-left,.pie-right {
    width: 50%; height: 100%;
    float: left;
    position: relative;    overflow: hidden;
}
// 创建左半圆
.pie-left::before {
    content: "";
    position: absolute;
    width: 100%; height: 100%;    background-color: deepskyblue;
}
// 创建右半圆
.pie-right::before {
    content: "";
    position: absolute;
    width: 100%; height: 100%;    background-color: deepskyblue;
}
//  不旋转，作为右覆盖半圆
.pie-right::after {
    content: "";
    position: absolute;
    width: 100%; height: 100%;
    background-color: deepskyblue;}.pie-left::before {
    left: 100%;
    transform-origin: left;
    transform: rotate(calc(3.6deg * (var(--percent) - 50)));
    // 比例小于或等于50的时候 - 左半圆隐藏；    opacity: calc(99999 * (var(--percent) - 50));
}
.pie-right::before {
    right: 100%;
    transform-origin: right;    transform: rotate(calc(3.6deg * var(--percent)));
}
.pie-right::after {
    // 比例大于50时 - 右半圆一直显示
    opacity: calc(99999 * (var(--percent) - 50));
}
</style>
<div class="pie-simple" style="--percent: 10;">
    <div class="pie-left"></div>    <div class="pie-right"></div>
</div>
<h4>40%大小</h4>
<div class="pie-simple" style="--percent: 40;">
    <div class="pie-left"></div>    <div class="pie-right"></div>
</div>
<h4>80%大小</h4>
<div class="pie-simple" style="--percent: 80;">
    <div class="pie-left"></div>    <div class="pie-right"></div>
</div>
<h4>99%大小</h4>
<div class="pie-simple" id="percent" style="--percent: 99;">
    <div class="pie-left"></div>    <div class="pie-right"></div>
</div>

主要应用的是：opacity属性的边界特性控制元素的显隐；即：

.example {
opacity: -999; // 解析为0，完全透明
opacity: -9; // 解析为0，完全透明
opacity: 2; // 解析为1，完全展示
opacity: 999; // 解析为1，完全展示
}

可通过js设置其percent的大小：

$('#percent').css('--percent'); // 获取当前进度的大小

$('#percent').css('--percent', '20'); // 设置当前进度的大小

案例二：加载进度条的应用

进度条的效果示意图如下：

代码如下所示：

<style>

.bar {

line-height: 20px; background-color: #eee;}.bar::before { counter-reset: progress var(--percent); content: counter(progress) "%\2002"; display: block; width: calc(100% * var(--percent) / 100); font-size: 14px; color: #fff; background-color: deepskyblue; text-align: right; white-space: nowrap;

overflow: hidden;}

</style>

该示例引用了css变量与伪元素的content的计数器counter结合一起使用展示进度；
并使用calc()函数;在现代的浏览器中,calc()函数还支持嵌套使用：

.list {--size: calc(100% - 2rem);width: calc(var(--size) / 6);}// 等同于.list {width: calc(calc(100% - 2rem) / 6);}

案例三：渐变进度条

引用conic-gradient锥形渐变实现半圆的渐变进度效果；展示如下：

代码如下所示：

// 该实例用的是vue3的组件模式书写<script setup lang="ts">import { onMounted, ref, watchEffect} from 'vue';
    interface percentData {
        percent: number,
		icon: string    };
    // 百分比与icon的默认值`在这里插入代码片`
    const props = withDefaults(defineProps<percentData>(), {
        percent: 0,
		icon: 'icon'
    });
	const percentRef = ref<HTMLElement>();
	onMounted(() => {
	});
	watchEffect(() => {
		percentRef.value?.style.setProperty('--percent', props.percent.toString());
	});</script><template>
	<div class="percent" ref="percentRef">
		<div :class="['per__icon', icon]"></div>
	</div></template><style scoped lang="scss">
	.percent {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		margin: 0 auto;
		overflow: hidden;
		background: conic-gradient(#37f7f8, #1d61fe,#1d61fe calc(var(--percent ) * 1% - 50%), #37f7f8 calc(var(--percent) * 1%), #364058 calc(var(--percent) * 1%));
		.per__icon {
			position: absolute;
			top: 20px;
			left: 20px;
			right: 20px;
			bottom: 20px;
			border-radius: 50%;
			background: #141535;
			display: flex;
			justify-content: center;
			align-items: center;
			&::before {
				content: '\3000';
				width: 90px;
				height: 90px;
				position: absolute;
			}
			// 根据添加类名添加中心的icon
			&.icon::before {
				background: url('../assets/img/classroom.png');
				background-size: 100% 100%;
			}
		}
	}
</style>

该文章在 2023/7/26 12:33:40 编辑过

关键字查询

html

css

进度

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。