如何在 JavaFX 中设置 ProgressBar 组件的样式

How can I style the ProgressBar component in JavaFX

提问by Yoav Kadosh

I am trying to add custom css styling to the JavaFX ProgressBar component but I couldn't find any information on the topic. I am looking for the css class names and the css commands that are required to:

我正在尝试向 JavaFX ProgressBar 组件添加自定义 css 样式，但找不到有关该主题的任何信息。我正在寻找以下所需的 css 类名和 css 命令：

• set the color of the progress bar itself
• set the background color of the progress bar (not the same as setting the background color)
• add a custom text node on top of the progress bar (to show the different states)

• 设置进度条本身的颜色
• 设置进度条的背景色（和设置背景色不一样）
• 在进度条顶部添加一个自定义文本节点（以显示不同的状态）

采纳答案by jewelsea

I have marked this answer as community wiki.

我已将此答案标记为community wiki。

If you have ideas for JavaFX ProgressBar styling outside of the original initial styling queries, please edit this post to add your styling ideas (or to link to them).

如果您对原始初始样式查询之外的 JavaFX ProgressBar 样式有想法，请编辑此帖子以添加您的样式想法（或链接到它们）。

set the color of the progress bar itself

设置进度条本身的颜色

Answered in:

回复于：

• JavaFX ProgressBar: how to change bar color?

• JavaFX ProgressBar：如何更改条形颜色？

The answer demonstrates

答案证明

1. Dynamic styling of the progress bar, so that the bar's color changes depending upon the amount of progress made.
2. Static styling of the progress bar, which just sets the bar's color forever to a defined color.

1. 进度条的动态样式，以便进度条的颜色根据取得的进度量而变化。
2. 进度条的静态样式，它只是将进度条的颜色永远设置为定义的颜色。

JavaFX 7 (caspian) on a Windows PC:

Windows PC 上的 JavaFX 7（里海）：

JavaFX 8 (modena) on a Mac:

Mac 上的 JavaFX 8 (modena)：

Sometimes people like barbershop pole style gradients, like the bootstrap striped style:

有时人们喜欢理发店的杆状渐变，比如自举条纹风格：

• ProgressBar Animated Javafx

• ProgressBar 动画 Javafx

set the background color of the progress bar (not the same as setting the background color)

设置进度条的背景色（和设置背景色不一样）

Define an appropriate css style for the progress bar's "track":

为进度条的“track”定义合适的 css 样式：

.progress-bar > .track {
  -fx-text-box-border: forestgreen;
  -fx-control-inner-background: palegreen;
}

add a custom text node on top of the progress bar (to show the different states)

在进度条顶部添加一个自定义文本节点（以显示不同的状态）

Answered in:

回复于：

• Draw a String onto a ProgressBar, like JProgressBar?

• 在 ProgressBar 上绘制一个字符串，比如 JProgressBar？

how to change the height of a progress bar:

如何更改进度条的高度：

Answered in:

回复于：

• How to get narrow progres bar in JavaFX?

• 如何在 JavaFX 中获得狭窄的进度条？

Sample CSS:

示例 CSS：

.progress-bar .bar { 
    -fx-padding: 1px; 
    -fx-background-insets: 0; 
}

José Pereda gives a nice comprehensive solution for narrow progress bars in his answer to:

José Pereda 在他的回答中为窄进度条提供了一个很好的综合解决方案：

• How to get a small ProgressBar in JavaFX

• 如何在 JavaFX 中获得一个小的 ProgressBar

I am looking for the css class names and the css commands

我正在寻找 css 类名和 css 命令

The place to look is in the default JavaFX style sheet.

要查看的位置在默认的 JavaFX 样式表中。

• modena.cssfor Java 8.
• caspian.cssfor Java 7.

• 适用于Java 8 的modena.css。
• 用于 Java 7 的caspian.css。

The ProgressBar style definitions for caspian (Java 7) are:

caspian (Java 7) 的 ProgressBar 样式定义是：

.progress-bar {
    -fx-skin: "com.sun.javafx.scene.control.skin.ProgressBarSkin";
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
    -fx-background-insets: 0, 1;
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}

.progress-bar .bar {
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)),
        linear-gradient(to bottom, derive(-fx-accent,38%), -fx-accent);
    -fx-background-insets: 0, 1, 2;
    -fx-padding: 0.416667em; /* 5 */
}

.progress-bar:indeterminate .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}

.progress-bar .track {
     -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
    -fx-background-insets:  0, 1;
}

.progress-bar:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

The progress bar style definitions for modena (Java 8) are:

modena (Java 8) 的进度条样式定义是：

.progress-bar {
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}
.progress-bar > .bar {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
    -fx-background-insets: 3 3 4 3;
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}
.progress-bar:indeterminate > .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}
.progress-bar > .track {
      -fx-background-color: 
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom, 
            derive(-fx-control-inner-background, -7%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -3%),
            derive(-fx-control-inner-background, -9%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
}

The JavaFX CSS reference guidecontains general information on the use of CSS in JavaFX (which differs somewhat from the use of CSS in HTML).

的JavaFX的CSS参考指南包含JavaFX中使用CSS（其从在HTML中使用CSS有所不同）的一般信息。

回答by Ion Scorobogaci

css file:

css文件：

.green-bar {
    -fx-accent: #27BB9A;
}

assign this class to the progressbar

将此类分配给进度条