Adding and styling HTML5 "progress"element

I’m trying to add a style a progress bar element to a prototype.

I’ve been able to embed the HTML5 progress element into my Webflow page.

This is what I have now:

http://test-embedding-site.webflow.com/

Now, I was reading this post in which the author explains how to overwrite these bar’s default styles.

In the article, he mentions the following:

We can target determinate progress bars using the progress[value] selector.

Can I access this selector using Webflow? How?

Thanks a lot!

Hi @Cesc_Vilanova, thanks for your question. You can do what you want to accomplish by doing a few things. First, give you progress bar a unique ID. In the example below, the code I got from the CSS-tricks page, I added an id for the progress bar code that I pasted into an html embed widget:

<progress id="progressBar" max="100" value="80"></progress>

I named the progress bar as you can see, a unique ID of “progressBar”. Next, I created a form that I could change the value of my progress bar, as an example. You can see this in action at:

http://example-progress-bar.webflow.com/

For purposes of demonstration, I set my action property for the form, to trigger a javascript function that I have created in my Body panel of the Custom Code section in Site Settings:

And I created the following function in my Custom Code, to change the value of the progress bar, via the form input:

<script>
    
    function changeProgress() {
     
     $("#progressBar").val($("#progress").val());   
        
    }
    
</script>

Notice the id for the progress bar is #progressBar, and the value #progress is the name of my text field in the form. I am setting the value of the progress bar from the current value in the form.

You can change the values in the preview site when in preview mode, and view the progress bar change to some value you want.

Let me know if this answers your question, or if you need some clarification. Cheers

2 Likes

Thanks @cyberdave.

This is interesting but I was mostly interested in changing the appearance of the default progress bar.

I guess that adding a unique id can help me do this. Is that correct?

Thanks again,

Hi, the unique ID allows you to select the progress bar and/or style that. If you want to get different styles for html5 progress bar, then you would need to add the appropriate css for the progress bar to the HEAD panel of your Custom Code section in Site Settings.

Try pasting this into the HEAD:

<style>
    
progress[value] {
  
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;

  width: 250px;
  height: 20px;
}
    
</style>

Here is what it looks like in the HEAD panel:

You can probably look on the net for different styles to play around with. I hope that clarifies how to style your progress bar. I also updated my example above, to show the progress bar with this styling css applied to it.

1 Like

Cool, thanks a lot for your detailed answer @cyberdave.