<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>
import { CircularProgressbarWithChildren } from 'react-circular-progressbar';
//CircularProgressbarsccss
import 'react-circular-progressbar/dist/styles.css';
const Circularprogressbar = (props) => {
return (
<div>
<div style={{width:60, height:60,}}>
<CircularProgressbarWithChildren styles={{
width:'60px',
height:'60px',
trail:{
strokeWidth:'4px',
stroke:'#ddd',
},
path:{
stroke:props.stroke,
strokeLinecap:'rounded',
}
}} value={props.value} id={props.id} className={props.className} >
{props.children}
</CircularProgressbarWithChildren>
</div>
</div>
)
}