SoFunction
Updated on 2025-04-03

Vue circular progress bar ring progress bar component display picture example

Reference

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5In-houseSVGProperties to achieve circular progress bar effect</title>
    <style>
        #a{color:red;}
    </style>
</head>
<body>
<svg width="440" height="440">
    <text style="fill:black;" font-size="80" x="160" y="240" width="440" height="440" >30%</text>
    <circle cx="220" cy="220" r="170" stroke-width="40" stroke="#C9CACA" fill="none"></circle>
    <circle  cx="220" cy="220" r="170" stroke-width="40" stroke="#E73468" fill="none"
            transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=""></circle>
</svg>
<script>
    var circle = ("c1");
    var a = ("a").innerHTML;
    var b=parseInt(a)/100;
        var percent = 0, perimeter =  * 2 * 170;
    setInterval(function () {
        if(percent<b){
            ('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
            percent+=1/100;
        }
    },100);

</script>
</body>
</html>

Details

<template>
    <div class="cycle_box" style="position: relative;" :style="{width:width+'px',height:width+'px'}">                    
        <svg :width="width" :height="width" >            
            <circle :cx="cyclePosition" :cy="cyclePosition" :r="radius" :stroke-width="strokeWidth" :stroke="backgroundColor" fill="none"     ></circle>
            <circle :cx="cyclePosition" :cy="cyclePosition" :r="radius" :stroke-width="strokeWidth" :stroke="progressColor" fill="none"  
                :stroke-dasharray="dasharray"  :transform="transform"   class="cycle_out"></circle>
        </svg>
        <img :src="imgUrl" alt="" v-if="imgUrl!=''" class="cycle_img" />  
        <div class="cycle_text" v-if="imgUrl==''" style="font-size: 13.1111px; color: rgb(96, 98, 102);">{{progress}}%</div>      
    </div>
</template>
<script>
  export default {
    name:"cycle",
    props: {
        progress: {type: Number, default: 0},//Progress bar progress        width: {type: Number, default: 140},//The entire width        strokeWidth: {type: Number, default: 10},//Progress bar width        textClass: {type: String, default: "cycle-text"},//Class name of the middle text        backgroundColor: {type: String, default: "#ebeef5"},//Progress bar background color progressColor: {type: String, default: "#20a0ff"},//Progress bar background color imgUrl: {type: String, default: ""},//The picture displayed    },
    data (){
        return {  
            perimeter : * 2 * 40,       
            radius:0,//radius            dasharray:0,
            cyclePosition:0,
            transform:"rotate(270,60,60)"
            }        
    },
    mounted(){
        let percent=(/100)        
        =(()/2)
        =/2
        = * 2 * 
        = * percent + " " +  * (1- percent)
        =`rotate(270,${},${})`
        (, ,,,)
    },
    methods:{
    }
  }
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cycle_out{
    stroke-linecap:round;
}
.cycle_img{
    position: absolute;
    top: 50%;
    left: 40%;
    width: 20%;
    text-align: center;
    margin: 0;
    transform: translate(0,-50%);
}
.cycle_text{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    transform: translate(0,-50%);
}
</style>

Quote method

js

import cycle from "../../components/"
  components: {
        cycle,
    },
 data (){
        return {  
            imageUrl: require('../../assets/'),
            }        
    },

Template part

<cycle :progress="80" :width="100" :stroke-width="12" :imgUrl="imageUrl"></cycle>

Pay attention to the reference method of the image otherwise it may not be displayed.

If imgUrl is not transmitted, the percentage number will be displayed

Modify the others according to your needs

This part is mainly written because element does not meet the needs of internal display pictures.

The above is the detailed content of the example of the internal display of the picture of the vue circular progress bar ring progress bar component. For more information about the internal display of the picture of the vue progress bar, please pay attention to my other related articles!