Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
	<h2>ProgressBar Style</h2>
	<div style="margin-bottom:20px">
		<ProgressBar :value="30" class="mybar"></ProgressBar>
	</div>
	<div style="margin-bottom:20px">
		<ProgressBar :value="20" barCls="c1"></ProgressBar>
	</div>
	<div style="margin-bottom:20px">
		<ProgressBar :value="40" barCls="c2"></ProgressBar>
	</div>
	<div style="margin-bottom:20px">
		<ProgressBar :value="50" barCls="c3"></ProgressBar>
	</div>
	<div style="margin-bottom:20px">
		<ProgressBar :value="60" barCls="c4"></ProgressBar>
	</div>
	<div style="margin-bottom:20px">
		<ProgressBar :value="80" barCls="c5"></ProgressBar>
	</div>
	<div style="margin-bottom:20px">
		<ProgressBar :value="100" barCls="c6"></ProgressBar>
	</div>
  </div>
</template>

<script>
export default {};
</script>
<style>
.mybar {
  height: 1px;
  background: #ddd;
}
.mybar .progressbar {
  border: 0;
}
.mybar .progressbar-value {
  background: red;
}
</style>