プログレスバー-SVG実装

    
    

​

.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;        }    }}​

computed: {    round(){        return 2 * Math.PI * 90;    },},
methods: {    
    progressPresent(percent){        
        return (100 - percent) / 100 * this.round    }},        
data:{
        percent :10}