Circular progress bar with react - reactjs

Question

In my react app I am using a circular progress bar to show time left. The progress bar is using bootstrap 3. The code is working fine when the value is hard coded but when I give a percentage value from a state variable the progress bar is not showing. I copied this code from the net and it uses bootstrap 3. I want to use it to show reverse timer. So the percentage is 100 initially and it decreases every second. The circle shows the initial value at first but as soon as the value of percent changes the circle loses the color and shows basic gray color.
the code in render is
constructor(props){
super(props);
this.state = {
hours: 2,
min: 0,
secs: 0,
fin: false,
percent: 100
}
}
componentDidMount(){
this.myInterval = setInterval(() => {
var {hours,min,secs,fin,percent} = this.state;
if(secs > 0){
secs--;
} else {
secs = 59;
if(min > 0){
min--;
percent = Math.floor(percent - 0.8);
} else {
min = 59;
percent = Math.floor(percent - 0.8);
hours--;
if(hours < 0){
fin = true;
hours = min = secs = 0;
}
}
}
this.setState(prevState => ({
hours, min , secs , fin, percent
}))
}, 1000);
}
<div className="container">
<div className="row">
<div className="col-sm-3 col-md-2">
<div className="progress" data-percentage={this.state.percent}>
<span className="progress-left">
<span className="progress-bar"></span>
</span>
<span className="progress-right">
<span className="progress-bar"></span>
</span>
<div className="progress-value">
<div>
{this.state.hours}:{this.state.min}<br/>
<span>Time Left</span>
</div>
</div>
</div>
</div></div></div>
SASS
$borderWidth: 7px;
$animationTime: 1.5s;
$border-color-default: #eee;
$border-color-fill: #ffb43e;
$size: 150px;
//Create how many steps
$howManySteps: 10; //this needs to be even.
//for fun try using 20 and changine in the HTML the data-percentage to 15 or 85
.progress {
width: $size;
height: $size;
line-height: $size;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
&:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: $borderWidth solid $border-color-default;
position: absolute;
top: 0;
left: 0;
}
> span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress-left {
left: 0;
}
.progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: $borderWidth;
border-style: solid;
position: absolute;
top: 0;
border-color: $border-color-fill;
}
.progress-left .progress-bar {
left: 100%;
border-top-right-radius: ($size/2);;
border-bottom-right-radius: ($size/2);;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
//animation: loading-2 1.5s linear forwards 1.8s;
}
.progress-right {
right: 0;
.progress-bar {
left: -100%;
border-top-left-radius: ($size/2);;
border-bottom-left-radius: ($size/2);;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
//animation: loading-1 1.8s linear forwards;
}
}
.progress-value {
display: flex;
border-radius: 50%;
font-size: 28px;
text-align: center;
line-height: 20px;
align-items: center;
justify-content: center;
height: 100%;
//font-family: $work-sans;
font-weight: 300;
div {
margin-top: 10px;
}
span {
font-size: 12px;
text-transform: uppercase;
}
}
}
/* This for loop creates the necessary css animation names
Due to the split circle of progress-left and progress right, we must use the animations on each side.
*/
#for $i from 1 through $howManySteps {
$stepName: ($i*(100 / $howManySteps));
//animation only the left side if below 50%
#if $i <= ($howManySteps/2) {
.progress[data-percentage="#{$stepName}"] {
.progress-right .progress-bar {
animation: loading-#{$i} $animationTime linear forwards;
}
.progress-left .progress-bar {animation: 0;}
}
}
//animation only the right side if above 50%
#if $i > ($howManySteps/2) {
.progress[data-percentage="#{$stepName}"] {
.progress-right .progress-bar {
animation: loading-#{($howManySteps/2)} $animationTime linear forwards; //set the animation to longest animation
}
.progress-left .progress-bar {
animation: loading-#{$i - ($howManySteps/2)} $animationTime linear forwards $animationTime;
}
}
}
}
//animation
#for $i from 1 through ($howManySteps/2) {
$degrees: (180/($howManySteps/2));
$degrees: ($degrees*$i);
#keyframes loading-#{$i}{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate($degrees);
transform: rotate(#{$degrees}deg);
}
}
}
//additional styling
.progress {
margin-bottom: 1em;
}