Apply style to HTML Progress element in CSS

Last Reply 6 days ago By dharmendr

Posted 6 days ago

how to apply style on file progress bar

i want to apply the css style to progress bar like green and make it gradient

how to do that

please advice

<progress id="fileProgress" class="p-bar" style="display: none"></progress>
<input type="button" class="c-attach" id="btncancel" onclick="myFunction()" value="X" style="display:none" >
<span id="lblMessage"></span>
 <%--<input type="button" id="btnUpload" value="Upload" />--%>
</div>
<label id="lbluploadcontrol" class="file-upload">
    <span class="inbox-attach">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/inbox/attach.png" /></span>    
    <input type="file" name="postedFile" />
</label>

 

You are viewing reply posted by: dharmendr 6 days ago.
Posted 6 days ago

Hi nauna,

Use below css.

CSS

progress {
    height: 15px;
    border-radius: 1em;
    margin: 5px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%,transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%,transparent 75%) left/30px 30px repeat-x, linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed, lightgray;
    box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
    animation: change 1s linear infinite;
}