Circle Progress

  • Use the required class varient (e.g. progress-secondary, progress-success, progress-warning, progress-danger, progress-dark ) for different background-color.
    • Html
    <SwiperSlide className="card card-slide col-lg-4">
    <div className="card-body">
        <div className="progress-widget" >
            <Circularprogressbar stroke="#3a57e8"  value={90} id="circle-progress-01" >
                <svg className="card-slie-arrow " width="24" height="24px" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z" />
                </svg>
            </Circularprogressbar>
            <div className="progress-detail">
                <p  className="mb-2">Total Sales</p>
                <h4 className="counter">$560K</h4>
            </div>
        </div>
    </div>
</SwiperSlide>
    Script
    `import { CircularProgressbarWithChildren } from 'react-circular-progressbar';

//CircularProgressbarsccss
import 'react-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