Implement a linear gradient on the HTML progress bar to enhance its color scheme

I have some code that applies a linear-gradient to a progress bar.

Currently, it only shows the gradient on the color rgb(33, 177, 89).

How can I keep the original progress bar color and apply a linear-gradient on top of it?

I am experimenting with showing gradients on two progress bars - one red and one blue.

<div style="color:red;">
  <progress style=background:currentColor max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1">
  </progress>
</div>

<div style="color:blue;">
  <progress style=background:currentColor max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1">
  </progress>
</div>

Check out the example on jsfiddle

https://jsfiddle.net/nick1111/3bLgLr9h/95/

htmlcss

Answer №1

When it comes to HTML tags, they do not inherently inherit data from their parent elements like some scripting languages do. In order to change the appearance based on a specific class applied, you need to define CSS classes.

<style type="text/css">

.row { margin:20px 0; }

progress {
    border: 0;
    background: #eee;
    border-radius: 100px;
} 

progress::-webkit-progress-bar {
    background: #eee;
    border-radius: 100px;
}

progress::-webkit-progress-value {
    border-radius: 100px;
    background: linear-gradient(to right, rgba(33, 177, 89, .1), rgba(33, 177, 89, 1));
}

progress.red::-webkit-progress-value {
    border-radius: 100px;
    background: linear-gradient(to right, rgba(255, 0, 0, .1), rgba(255, 0, 0, 1));
}

progress.blue::-webkit-progress-value {
    border-radius: 100px;
    background: linear-gradient(to right, rgba(0, 0, 255, .1), rgba(0, 0, 255, 1));
} 


<div class="row">
    <progress class="red" max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1"></progress>
</div>
<div class="row">
    <progress class="blue" max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1"></progress>
</div>

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

Moving icon that appears when hovering over a menu button

Before diving into this, please take a moment to visit the following website to understand my goal: You'll notice there is a noticeable RED arrow positioned below the menu. What I aim to accomplish is... when I hover over a menu button, the arrow smo ...

javascriptjqueryhtmlcss

Develop a line using botbuilder

Good day. I'm currently working on a vue js component that will function as a botbuilder. The main goal is to manipulate the cards displayed on the screen and establish links between them to define the flow of actions. Here's an image for referen ...

htmlcssvue.js

Animate with keyframes: slide first, then rotate

I want to add a unique touch to my text by sliding it in and creating a bouncing effect as if it's hitting a wall before settling into place. However, the issue I'm encountering is that whenever I incorporate rotation, the text rotates while sti ...

htmlcss

How to toggle a specific element in Bootstrap 4 with a single click, without affecting other elements

I've been struggling with a frustrating issue: I have 3 elements next to each other at the bottom of the fixed page. I tried using Bootstrap4 toggles to display only text when a user clicks on an image, but it ends up toggling all the images instead o ...

htmlcssbootstrap-4toggle

Tips for incorporating images from Jade files when using CSS in Node.js rendering:

I am currently working on a Node.js project with the following directory structure: /web /views /css asc.gif bg.gif desc.gif tablesorter.css index.jade search.jade server.js Within my server.js file, I render the s ...

javascriptcssnode.jspug

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

javascripthtmlcss

Should the max-height transition be set from 0 to automatically adjust or to none?

I'm dealing with an element that has a max-height of 0, and I want to smoothly transition it to either no max-height, auto, or none; essentially allowing it to expand based on the number of elements inside. I prefer not to use JavaScript or flex at th ...

csscss-transitions

Emphasize a specific line of text within a <div> with a highlighting effect

I'm looking to achieve a similar effect as demonstrated in this fiddle As per StackOverflow guidelines, I understand that when linking to jsfiddle.net, it's required to provide some code. Below is the main function from the mentioned link, but f ...

javascriptjqueryhtmlcsshighlighting

Discovering the method for retrieving JavaScript output in Selenium

Whenever I need to run JavaScript code, the following script has been proven to work effectively: from selenium import webdriver driver=webdriver.Firefox() driver.get("https:example.com") driver.execute_script('isLogin()') However, when I atte ...

javascriptpythonhtmlfunctionselenium

How to shift an image to the right side of the navbar

Is it possible to change the position of an image within a navbar from left to right? I have tried using the float property but it doesn't seem to work. .logo-img{ float: right; margin: 0px 15px 15px 0px; } <a class="navbar-brand logo-img" ...

javascriptcssnavbarbootstrap-5nav

Unable to use window dimensions in Canvas properties

I'm just starting to explore html, css, and js, and I'm currently experimenting with canvas. My goal is to create a canvas that dynamically adjusts its size based on the window dimensions. Additionally, I want to draw a smaller rectangle within t ...

javascripthtmlcsscanvaswindow

Getting the nth-child rule for CSS in IE9 to function properly in IE8

This code is functioning in IE9: body.country-XYZ .abc:nth-child(3) { display:none; } As :nth-child() is effective in IE9 and newer versions, what can be done to ensure it also functions on IE8? Can you suggest an alternative method for achieving th ...

cssinternet-explorer-8

Excluding certain images from a JavaScript Photobox animation within a div - a step-by-step guide

Currently, I am using photobox to showcase all the images in a div as part of a beautiful gallery display. However, there is one image that I do not want to be included in this gallery - a PDF icon which, when clicked, should download a PDF file. The issue ...

javascripthtmlcss

Expanding on AngularJS module functionality to dynamically add multiple rows into a

On my form, users can select a supplier from a dropdown menu and then click a button to choose an item. When the button is clicked, a module opens where they can search for items. The results appear in a table within the module, each row with a + symbol ne ...

htmlangularjs

Outlook's limited width is causing images to exceed the boundaries of the HTML email

I have a collection of images that display perfectly in Gmail, but when viewed in Outlook, all five images appear within a single <tr> and cause the table width to expand. My desired layout is to have the first four images centered on the first line ...

htmlcsshtml-table

Utilizing jQuery in combination with HTML and CSS

I'm having an issue with implementing jQuery animations for adding a new row on form submit. Additionally, I need to dynamically add and remove classes with animation effects without altering the HTML or CSS files (as this project is for school). Her ...

jqueryhtmlcss

Issues are arising with Bootstrap's functionality within the Vite React app

I am new to working with react and vite. I am currently developing a vite react application that requires the use of bootstrap. I followed the instructions provided on the official Bootstrap website here. However, not all Bootstrap functionalities are work ...

javascriptcssreactjsbootstrap-5vite

The transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Fir ...

javascripthtmlcss

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue: <div id="thumb1"> <img class="img-responsive" id="prova" src="img/thumb-up-dark.png" alt=""> <div id="pinline">0</div> ...

javascriptjqueryhtmlcsscounter

PHP interjecting a loop

Below is a loop that needs to be modified: <?php foreach ($this->item->extra_fields as $key=>$extraField): ?> <?php if($extraField->value != ''): ?> <div class="<?php echo ($k ...

phphtml