How can I dynamically adjust the CSS gradient values to reflect changes in my progress bar's value?

The CSS code in my stylesheet is customized to style the progress bar in Google Chrome with a gradient effect.

progress[value] {
    width: 100%; height: 40px;
    margin: 0 0 3em;
    border: 4px solid #000000;
}

progress::-webkit-progress-value {
    background-image:

    -webkit-linear-gradient(-45deg,
                           transparent 33%, rgba(0, 0, 0, .1) 44%,
                           rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top,
                           rgba(255, 255, 255, .25),
                           rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(right, #04d647, #009999);
}

However, my JavaScript code is causing the progress bar to change values continuously. Currently set to a green gradient, I want to modify it to display different colors based on percentage values (e.g., less than 30% = red, between 30%-65% = yellow, and more than 65% = green).

I have some basic JavaScript code in my HTML file to get started, but I'm unsure how to dynamically change the gradient colors within progress::-webkit-progress-value based on the value range. The challenge lies in modifying a pseudo-element like webkit-progress using JS.

if (progressbar1.value >= .30) {

   $("progress::-webkit-progress-value").css("background-color", "#424242");
   // How can I achieve this? Are there specific tags or scripts needed?

}

What am I missing here?

javascripthtmlcssprogress-barprogress

Answer №1

To customize the gradient of your progress bar, add a data attribute to your progress tag:

<progress data-value="0">

In your JavaScript code, determine when you want to change the gradient based on the progress value:

if(progressbar1.value>=65)
    progressbar1.dataset.value=65
else if(progressbar1.value>=30)
    progressbar1.dataset.value=30
else
    progressbar1.dataset.value=0

Next, update your CSS using attribute selectors to style the different values of the data-value attribute with specific gradients:

progress[data-value="0"]::-webkit-progress-value{
    background-image:/* red gradient here */;
}
progress[data-value="30"]::-webkit-progress-value{
    background-image:/* yellow gradient here */;
}
progress[data-value="65"]::-webkit-progress-value{
    background-image:/* green gradient here */;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Thick labels in Chart.js are shortened with three dots

Is there a way to show the entire label without it getting truncated with 3 dots? I have experimented with different options from https://www.chartjs.org/docs/master/axes/index, including padding, but so far I haven't been successful. The full date da ...

javascriptvue.jschartschart.jschartkick

Vue is now no longer displaying errors in the console

Something strange is happening while I'm debugging a Vue/Nuxt app. Suddenly, the errors in the console have disappeared whenever my Javascript references a function or variable that doesn't exist. Instead of showing an error, it just fails silent ...

javascriptvue.jsnuxt.js

Embed a Telegram account onto an HTML page using the <iframe> element

Is there a way to display the personal Telegram account in an iframe tag? I experimented with the code below, but unfortunately it did not produce the desired result: <iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe> ...

javascriptjqueryhtmlajax

Can we make this happen? Navigate through slides to important sections, similar to vertical paging

Imagine a website with vertical "slides" that take up a significant portion of the screen. Is there a way to smoothly add vertical paging to the scrolling? For example, when the user scrolls close to a specific point on the page horizontally, the page will ...

javascriptscrollpaging

Bootstrap modal vanishing instantly when mobile link is tapped

Encountering an unusual issue on mobile browsers (Chrome and Safari). I am utilizing a modal with the ID xyzModal. There is a link that triggers this modal to open, but on desktop, the link only appears on hover. To work around the hover effect on mobile ...

javascriptjquerytwitter-bootstrap

Tips for enhancing the clarity of an `html2canvas` screenshot

Here is the code I've been using with html2canvas to capture and download screenshots: Create HTML button <button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span cla ...

javascripthtmlcsshtml2canvas

Could the difficulty in clicking the first entry in Firefox be a bug?

Be sure to focus on the section highlighted in blue in the initial table. If you'd like, you can view the issue here view image http://example.com/static/error.gif UPDATE you can replicate it by double-clicking on the top portion of the first entry ...

htmlcssfirefoxcss-float

I would like to create a map showing the selected locations by checking them off using checkboxes

How can I draw a road map by selecting locations with checkboxes in form.php? After posting the selected locations to map.php file and assigning them to a $location array, how do I then assign these values to the waypoints array in the javascript calcRoute ...

javascriptphp

Are there any alternatives to jQuery address in the realm of dojo?

Currently, I am working on developing an ajax application using dojo. I am curious if there is a feature comparable to jQuery Address in terms of functionality. My goal is to implement ajax-based hash url navigation similar to Twitter and Facebook using do ...

javascriptjqueryajaxdojourl-routing

Perform the Checkbox action when it is marked

How to trigger href from input checkbox when it is checked Example of Checkbox Input Code: <input type="checkbox" value="{{$todo -> id}}" name="{{$todo -> ToDoName}}"> JavaScript Code: /* Custom todo list plugin */ $(".todo-list").todolis ...

javascriptphpjquerylaravelcheckbox

What sets index.js apart from _app.js in NextJs?

Can anyone shed some light on the distinction between the index.js file and _app.js? I'm following the Next tutorial and it instructs me to modify the index.js, but when I check the rendered output, it's actually _app.js. Can someone clarify this ...

javascriptreactjsnext.js

Consistent height for h2 containers across all CSS grid columns

Is there a way to ensure all h2 containers have the same height, both with JavaScript and without it? The h2 titles are dynamic and can vary in length, but I want to maximize the space for all containers. img { max-width: 100%; height: auto; } .gri ...

javascripthtmlcssgrid

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Greetings everyone, I have a webpage with two floating divs - one is about 360px wide and the other has an auto width. As the page scrolls, the left div is assigned a class that fixes it to the screen, allowing the other div to scroll. This functionality w ...

javascriptjqueryhtmlcss

Show a persistent header once you scroll past a certain point using Bootstrap

Utilizing Bootstrap affix property to reveal a header after scrolling down by 100px has been successful for me. However, I encountered an issue when trying to set the opacity property to 0.0001, it works as expected. But when setting it to 0 or changing di ...

javascripthtmlcsstwitter-bootstrap

What methods can be used to evaluate the efficiency of AngularJS in terms of DOM rendering?

Currently working on improving an AngularJS project and looking for ways to identify areas of improvement, such as memory leaks, browser performance, data rendering issues, and screen freezes. I attempted using Jmeter but it only shows page navigation spee ...

javascriptangularjsseleniumoptimizationperformance-testing

Tips for adjusting the width of ngx bootstrap modal?

Is there a way to adjust the width of my ngx bootstrap modal so that it is not fixed? I have attempted to modify it in the HTML code below but without success: Here's the HTML snippet: <div bsModal #childModal="bs-modal" class=" ...

cssmodal-dialogstyles

JavaScript has hindered cross-origin response due to Cross-Origin Read Blocking (CORB)

I am having trouble retrieving JSON responses from an API. The error message "Cross-Origin Read Blocking (CORB) blocked cross-origin response" keeps popping up. I've tried searching online for a solution to this problem, but so far, I haven't bee ...

javascriptajaxxmlhttprequestcross-browsercross-domain

Attempting to extract data from a text input field using AJAX and then transferring it to a different webpage

Having trouble getting the values entered in a textbox using ajax and sending them to another .php file. I was successful with a checkbox before, but unable to replicate it this time. Below is the code for the text boxes: <div align = "right"> & ...

phphtmlmysqlsql

When utilizing "column-count" with "display: flex", both Firefox and IE will only render a single column

I am struggling to achieve a two-column layout with nested columns inside each one. The code I used looks great on Chrome and Safari, but on Firefox and IE, it only displays in a single column: What mistake am I making here? .two-columns { column-cou ...

cssflexboxcss-multicolumn-layoutcolumn-count

Use jQuery to modify the URL and return based on certain form conditions

After my original post generated a lot of excitement but no constructive comments, I'm giving it another shot. I understand that JavaScript can be easily hacked. The main concept is to change the URL upon page load and revert back to the original on ...

javascriptjquery