title: Create simple custom progression bar in React
body: <p>I'm trying to create my simple progression bar in React using CSS and <code>setInterval</code>. It's not working properly after 10%. Does anyone know why it is happening? Thanks</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  
  const Loading = () =&gt; {
  
      const [percentage, setPercentage] = useState(0);
  
      const containerStyles = {
          height: 20,
          width: '100%',
          backgroundColor: &quot;#e0e0de&quot;,
          borderRadius: 50,
          margin: 50
      }
  
      const fillerStyles = {
          height: '100%',
          width: `${percentage.toString()}%`,
          backgroundColor: 'red',
          borderRadius: 'inherit',
          textAlign: 'right'
      }
  
      const labelStyles = {
          padding: 5,
          color: 'white',
          fontWeight: 'bold'
      }
  
      useEffect(() =&gt; {
          const newPercentage = parseInt(percentage) + 1;
          setInterval(() =&gt; setPercentage(newPercentage), 1000);
      }, [percentage])
  
      return (
          &lt;div style={containerStyles}&gt;
              &lt;div style={fillerStyles}&gt;
                  &lt;span style={labelStyles}&gt;{percentage}%&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default Loading;
  </code></pre>