前端页面中进度条原理
关注“希里安”，get更多有用干货！
## 近日见闻
1. 原定9月2日举办的Ceph Days China活动将推迟至12月份与OpenInfra Days China一同举办。相关后续筹备情况，请持续关注！--ceph开源社区
2. kpack加入了Buildpacks社区组织 --LFAPC
3. Volcano 社区 v1.8.0 版本正式发布，Volcano是业界首个云原生批量计算项目，于2019年6月在上海 KubeCon 正式开源，并在2020年4月成为 CNCF 官方项目。2022年4月，Volcano 正式晋级为CNCF 孵化项目。--容器魔方
4. 忙碌是治疗不悦的良药 --近日有感
## 举例使用elmentplus中的进度条
总的来说，最常用的一个是直线进度条，一个就是环形进度条,用好这俩个，基本能应付常用场景了。
所以先看看官网给的例子：
直线进度条
```
<template>
<div class="demo-progress">
<el-progress :percentage="50" />
<el-progress :percentage="100" :format="format" />
<el-progress :percentage="100" status="success" />
<el-progress :percentage="100" status="warning" />
<el-progress :percentage="50" status="exception" />
</div>
</template>
<script lang="ts" setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;
width: 350px;
}
</style>
```环形进度条
```
<template>
<div class="demo-progress">
<el-progress type="circle" :percentage="0" />
<el-progress type="circle" :percentage="25" />
<el-progress type="circle" :percentage="100" status="success" />
<el-progress type="circle" :percentage="70" status="warning" />
<el-progress type="circle" :percentage="50" status="exception" />
</div>
</template>
<style scoped>
.demo-progress .el-progress--circle {
margin-right: 15px;
}
</style>
```官网例子效果如下
看看实际场景使用的例子，比如表示集群资源的情况，效果如下：
再来看看那API属性，这里只有一个参数是必填的：
```percentage``` 就是百分比的意思，类型为number，默认值为0
其余参数根据需要选择，比如宽度、动画、背景色。
那么原理是什么呢？
通过HTML元素、CSS样式和JavaScript交互的结合来达到展示和更新进度的效果。
### 关键概念
容器元素用于包含进度元素，并通过其宽度来表示当前的进度。
进度元素则是通过改变其宽度来展示实际的进度。
通过原生js看：
HTML结构：
```
<div class="progress-container">
<div class="progress-bar" id="progress"></div>
</div>
```CSS 样式
```
.progress-container {
width: 80%;
max-width: 400px;
border: 2px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 30px;
background-color: #4caf50;
transition: width 0.3s ease-in-out;
}
```JavaScript 交互
```
const progressBar = document.getElementById("progress");
const startButton = document.getElementById("startButton");
startButton.addEventListener("click", () => {
let progress = 0;
const interval = setInterval(() => {
progress += 10;
if (progress <= 100) {
progressBar.style.width = `${progress}%`;
} else {
clearInterval(interval);
}
}, 500);
});
```### 涉及以下几个方面：
数据更新和控制：进度条组件需要获取任务的进度值数据，这可以通过外部传入的数据属性或组件内部状态来实现。Element Plus 的进度条组件可以通过 :percentage 属性来控制进度的百分比。
界面元素的渲染：进度条的可视化效果是通过 HTML 元素和 CSS 样式来实现的。Element Plus 的进度条组件会根据传入的进度值，动态计算并设置进度条的宽度、填充颜色等样式属性。
CSS 样式控制：进度条的填充效果是通过 CSS 中的渐变（Gradient）或宽度来实现的。Element Plus 的进度条组件使用 CSS 样式来控制进度条的外观，例如，进度条的背景色、填充颜色、宽度等。
状态反馈：进度条不仅仅是一个静态的图形，它还可以反映任务的状态，如成功、失败、警告等。Element Plus 的进度条组件支持不同的状态，通过 status 属性来设置。
交互性：在某些情况下，进度条可能需要与用户的操作进行交互，例如暂停、取消任务等。这可以通过添加按钮或其他交互元素来实现。