进度条-SVG实现

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}