Progress bar from html to word is not visible

Aspose.Words Product Family
1

Hi,
We want to show progress bar inside a table after convert from html to Word

I tried by simple progress bar but progress bar is hidden in word and by using css the whole line is colored and by div nothing shows

this is my html

<div>
    <h2>My progressbar</h2>
    <div class="progress">
        <div class="bar" style="width:35%">
            <p class="percent">35%</p>
        </div>
    </div>
    <div class="progress">
        <div class="bar" style="width:50%">
            <p class="percent">50%</p>
        </div>
    </div>
    <progress value="4" max="10">40%</progress>
</div>

and this is css:

.progress {
  margin:20px auto;
  padding:0;
  width:90%;
  height:30px;
  overflow:hidden;
  background:#e5e5e5;
  border-radius:6px;
}
.bar {
    position:relative;
  float:left;
  min-width:1%;
  height:100%;
  background:cornflowerblue;
}
.percent {
    position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  font-family:tahoma,arial,helvetica;
  font-size:12px;
  color:white;
}

Thank you and have a nice day!!

Apurv

2

@Apurv45 The same question has been already answered in another you thread:
https://forum.aspose.com/t/progress-bar-from-html-to-word/255353/4
Aspose.Words in this case mimics MS Word behavior upon importing progress bar from HTML. The only possible solution, I can suggest is using an image or SVG instead of progress bar.