Circle Progress

Use the required class varient (e.g. progress-secondary, progress-success, progress-warning, progress-danger, progress-dark ) for different background-color.

Script
`import { CircularProgressbarWithChildren } from 'vue-circular-progressbar';

//CircularProgressbarsccss
import 'vue-circular-progressbar/dist/styles.css';

const Circularprogressbar = (props) => {
    return (
       <div>
            <div >
                <CircularProgressbarWithChildren 
                    trail:{
                        strokeWidth:'4px',
                        stroke:'#ddd',
                    },
                    path:{
                        stroke:props.stroke,
                        strokeLinecap:'rounded',
                    }
                value={props.value} id={props.id} className={props.className} >
                    {props.children}
                </CircularProgressbarWithChildren>
            </div>
Previous Next