Looking for help in creating a heart-shaped progress loader for a React project. I attempted using CSS but encountered issues with the progress not filling the entire heart design. Below is the code snippet I used. The progress should start from the bottom and fill up to 100%. Any suggestions on how to achieve this would be appreciated.
Thank you in advance!
/***Progress***/
import React, { Component } from 'react';
import ProgressBar from './ProgressBar';
class Progress extends Component {
constructor(props) {
super(props);
this.state = {
percentage: 60,
}
}
render() {
return (
<div>
<ProgressBar percentage={this.state.percentage}/>
</div>
)
}
}
export default Progress
/***Progress bar***/
import React from 'react';
import Filler from './Filler.js';
const ProgressBar = (props) => {
return (
<div className="ProgressBarH">
<Filler percentage={props.percentage}/>
</div>
)
}
export default ProgressBar;
/***Filler***/
import React from 'react';
const Filler = (props) => {
return (
<div className="filler" style={{width: `${props.percentage}%`}} />
)
}
export default Filler;
/***css***/
.ProgressBarH {
position: relative;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: 1px solid #ff7777 ;
background-color:#ff7777;
margin: 0 auto;
}
.ProgressBarH:before,
.ProgressBarH:after {
position: absolute;
width: 12px;
height: 12px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color:#ff7777;
}
.ProgressBarH:before {
bottom: -1px;
left: -8px;
}
.ProgressBarH:after {
top: -8px;
right: -1px;
}
.filler {
/* background: red; */
height: 100%;
border-radius: inherit;
transition: width .2s ease-in;
}