I am currently assisting a friend with creating a resume and we wanted to include a visually appealing progress bar for the skills section.
After successfully implementing the progress bar and seeing it display correctly in the browser, we encountered an issue when attempting to save the page as a PDF. The progress bar does not appear in the saved PDF file; instead, there is just a blank space where it should be.
Here is the code snippet for the progress bar:
.w3-progress-container{
width:90%;
height:1.5em;
position:relative;
background-color:#f1f1f1;
border-radius:7px;
height:12px;
margin-top: 5px;
background-color: #d5d4d4;
}
.w3-progressbar{
background-color: #0060A6;
height:100%;
position:absolute;
line-height:inherit;
border-radius:7px;
}
.management{
width:93%;
}
We are puzzled by why the progress bar is not rendering when saved as a PDF. Any insights or suggestions would be greatly appreciated!
Thank you!