How to add/change progress value to the Progress Bar in Semantic UI (CSS) in ReactJS

Question

I am Trying to add Progress Bar in React Application.

I am using Semantic CSS: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

From Documentation ( https://semantic-ui.com/modules/progress.html#/definition ), I found following sample code but unable to add/change the progress

<div class="ui green progress">
    <div class="bar"></div>
</div>

What I tried:

<div class="ui green progress" dataValue="1" dataTotal="100" id="progress">
    <div class="bar"></div>
</div>

But it is displaying as previous (no change).

How to add/change progress value (it may increase/decrease in future) to the Progress Bar in ReactJS?

Adding a value is enough to continue

Thanks in advance

Answer 1

Based on the link you provided you are using standard SemanticUI (which is not updated since 2018).

In that case you need to follow the usage page of the Progress Bar object to use it as Semantic UI wants. All the examples use jQuery, since it is a prerequisite of Semantic UI.

For example you can update data-percent

<div class="ui progress" data-percent="74" id="example">
  <div class="bar"></div>
  <div class="label">74% Funded</div>
</div>

and then call

$('#example').progress();

or you can directly update through JS with

$('#example').progress({
  percent: 22
});

An other solution, since you are using React, is to move to Semantic UI React , that has a proper implementation of Progress Bar and overall best fits with React.