進度條-SVG實現(xiàn)
html
<div class="progress-container"> <svg width="240" height="240" class="svg-progress"> <circle r="90" cy="120" cx="120" stroke-width="3" >>stroke="#cccccc" fill="none"></circle> <circle r="90" cy="120" cx="120" stroke-width="3" class="progress->>bar" stroke="purple" :stroke-dasharray="round" :stroke->>dashoffset="progressPresent(percent)" fill="none"></circle> </svg> <aside class="count"><strong class="num">{{percent}}</strong><em >>class="icon">%</em> </aside> </div>?
css
.svg-progress { transform: rotate(-90deg);}
.progress-bar { transition: stroke-dashoffset 1200ms cubic-bezier(.99, .01, .62, .94);}
.progress-container { width: 240px; height: 240px; position: relative;
.count { position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 240px; text-align: center;
.num, .icon {
color: purple;
vertical-align: middle;
font-size: 46px;
font-family: GothamRounded-Medium; } }}?
javascript
computed: { round(){ return 2 * Math.PI * 90; },},
methods: {
progressPresent(percent){
return (100 - percent) / 100 * this.round }},
data:{
percent :10}
