Vue 纯css方式实现自定义进度条组件
组件源码
<template><div><div class="bar" :style="{'--precent': precent}"></div></div></template><script>export default {name: 'ProgressBar',props: {precent:{},},data() {return {}},methods: {}}</script><style scoped>.bar{height: 14px;width: 100%;font-size: 10px;margin-top: 5px;background-color: #f5f5f5;}.bar::before{display: block;counter-reset: progress var(--precent); content: '';width: calc(1% * var(--precent));color: #fff;height: 14px;background-color: #2486ff;text-align: center;white-space: nowrap;overflow: hidden;}</style>调用方式（precent表示占比，这里的50表示是50%）：
<ProgressBar :precent="'50'"></ProgressBar>实现效果：
