CSS ::-webkit-progress-value Pseudo-Element

CSS ::-webkit-progress-value Pseudo-Element

The ::-webkit-progress-value pseudo-element is a non-standard CSS extension used to style the filled portion of an HTML <progress> element in WebKit and Blink-based browsers. It allows developers to customize the color, background, and appearance of the portion that represents completed progress.

Syntax

progress::-webkit-progress-value {
  background: #0066cc;
}

The pseudo-element is appended to a selector targeting an HTML <progress> element. The CSS declarations affect the filled portion in browsers that recognize the selector.

The -webkit- prefix identifies a browser-specific extension rather than a standardized CSS pseudo-element.

The selector does not change the amount of completed progress. It only controls the appearance of the value indicator.

How It Works

The HTML <progress> element represents the completion of a task, such as uploading a file, downloading information, or processing data.

Browsers typically display a progress element as a horizontal bar containing a background track and a filled portion.

The ::-webkit-progress-value pseudo-element targets the filled portion in supported WebKit and Blink implementations.

As the task advances, the browser adjusts the filled portion according to the element's value and max attributes.

CSS controls how the filled portion looks, while the HTML attributes determine how much of the task has been completed.

Progress Value and Maximum

The HTML <progress> element uses two attributes to represent a known completion amount.

• value - Specifies the amount of work completed.
• max - Specifies the total amount of work required to complete the task.

For example, the following progress element represents a task that is 40 percent complete.

<progress value="40" max="100">40%</progress>

The browser calculates the completed proportion by dividing the current value by the maximum value.

In this example, 40 divided by 100 equals 0.4, so the filled portion occupies approximately 40 percent of the progress track.

The maximum value does not have to be 100.

<progress value="3" max="5">3 of 5 steps</progress>

This example represents three completed steps out of five, or 60 percent completion.

If the max attribute is omitted or invalid, its default value is 1. The maximum must be greater than zero, and a determinate progress value must be a valid non-negative number.

Styling the Filled Portion

The ::-webkit-progress-value pseudo-element can be used to customize the filled portion with background colors, gradients, and rounded corners.

progress {
  width: 260px;
  height: 20px;
  appearance: none;
}
progress::-webkit-progress-bar {
  background: #e0e0e0;
  border-radius: 6px;
}
progress::-webkit-progress-value {
  background: #28a745;
  border-radius: 6px;
}

The appearance: none declaration requests removal of the browser's native appearance to allow custom styling.

The ::-webkit-progress-bar selector styles the background track, while ::-webkit-progress-value styles the completed portion.

In supported browsers, the filled portion appears green with rounded corners.

Because progress bars are native browser controls, the exact appearance may vary across browsers and operating systems.

Example

The following example creates a progress bar showing 75 percent completion, with a light gray track and a blue filled portion.

HTML:

<label for="upload-progress">Upload progress: 75%</label>
<progress id="upload-progress" value="75" max="100">75%</progress>

CSS:

progress {
  display: block;
  width: 260px;
  height: 20px;
  appearance: none;
  border: none;
}
progress::-webkit-progress-bar {
  background: #e0e0e0;
  border-radius: 6px;
}
progress::-webkit-progress-value {
  background: #0066cc;
  border-radius: 6px;
}

The progress element represents a task that is 75 percent complete.

In supported browsers, the track appears light gray and the completed portion appears blue.

Changing the value attribute to 90 increases the filled portion to 90 percent without requiring changes to the CSS.

The ::-webkit-progress-value pseudo-element affects the appearance of the completed portion but does not control its length directly.

Using Gradients

The background property can also apply a CSS gradient to the filled portion of a progress bar.

progress::-webkit-progress-value {
  background: linear-gradient(to right, #0066cc, #00aaff);
  border-radius: 6px;
}

The linear-gradient() function creates a smooth color transition from dark blue to light blue across the completed portion.

Gradients can make a progress bar more visually distinctive without changing its underlying completion value.

For a similar effect in Firefox, apply the gradient to ::-moz-progress-bar.

progress::-moz-progress-bar {
  background: linear-gradient(to right, #0066cc, #00aaff);
  border-radius: 6px;
}

When using gradients, maintain sufficient contrast between the filled portion and the background track so that the completion amount remains easy to distinguish.

Determinate and Indeterminate Progress

The HTML <progress> element supports both determinate and indeterminate progress indicators.

Determinate Progress

Determinate progress represents a task with a known completion amount. The value attribute specifies the current progress.

<progress value="60" max="100">60%</progress>

This example represents a task that is 60 percent complete. The filled portion corresponds to the current completion amount.

Indeterminate Progress

Indeterminate progress represents a task that is underway but whose completion amount is unknown.

<progress>Loading...</progress>

Without a value attribute, the browser displays an indeterminate progress indicator.

The appearance of indeterminate progress varies between browser implementations and may include animation or a moving indicator.

The ::-webkit-progress-value pseudo-element primarily serves to style the value indicator. Its behavior with indeterminate progress is implementation-dependent and should not be relied upon for consistent animation or styling.

Note: Setting value="0" creates determinate progress at zero completion. Omitting the value attribute creates indeterminate progress.

Cross-Browser Styling

Different browser engines use different pseudo-elements for styling the filled portion of HTML progress controls.

Chrome, Edge, and Safari support the WebKit-prefixed ::-webkit-progress-value selector. Firefox provides ::-moz-progress-bar for the completed portion.

The following example applies similar styling across these browser engines.

progress {
  width: 260px;
  height: 20px;
  appearance: none;
  border: none;
  border-radius: 6px;
  background: #e0e0e0;
}
progress::-webkit-progress-bar {
  background: #e0e0e0;
  border-radius: 6px;
}
progress::-webkit-progress-value {
  background: #0066cc;
  border-radius: 6px;
}
progress::-moz-progress-bar {
  background: #0066cc;
  border-radius: 6px;
}

The WebKit-prefixed rules style the track and completed portion in supported Chrome, Edge, and Safari implementations.

The Mozilla-specific rule styles the completed portion in Firefox, while the outer <progress> element provides the background track styling.

These rules can produce similar results, but browser-specific differences may remain.

For simpler customization, the standardized accent-color property can influence the color of native progress indicators in supporting browsers.

progress {
  accent-color: #0066cc;
}

The accent-color property is useful when a custom indicator color is needed without replacing the browser's native progress styling.

Accessibility Considerations

Custom progress bar styling should preserve the meaning and accessibility of the native HTML element.

• Provide a visible label describing the task being measured.
• Use accurate value and max attributes for determinate progress.
• Omit the value attribute when the completion amount is unknown.
• Maintain sufficient contrast between the background track and completed portion.
• Provide readable progress information rather than relying entirely on color or bar length.
• Update the progress value and accompanying text as the task advances.

For example, the label "Upload progress: 75%" communicates the completion amount without requiring users to interpret the bar visually.

When progress changes dynamically, update both the value attribute and the displayed progress text. Consider whether important changes need an additional announcement for assistive technology users.

Use the HTML <meter> element instead when representing a measurement within a known range rather than the completion of a task.

Browser Support

::-webkit-progress-value is a non-standard browser-specific pseudo-element used by WebKit and Blink implementations, including Safari, Chrome, and Edge.

Firefox does not use this selector for its native progress controls. It provides ::-moz-progress-bar for styling the completed portion.

The HTML <progress> element itself is widely supported, but styling its internal components remains browser-dependent.

For current compatibility information, visit Can I Use? and search for the HTML progress element. General progress element support does not guarantee support for this particular pseudo-element.

Specifications

::-webkit-progress-value is a proprietary browser extension and is not defined as a standardized pseudo-element in a CSS specification.

The HTML <progress> element and its attributes are defined in the WHATWG HTML Living Standard .