Можно ли увеличить верхнюю часть индикатора выполнения в JavaFX?

Question

Можно ли сделать индикатор прогресса (конец, показанный на изображении) больше или просто другим?

Вот мой CSS код для индикатора выполнения:

.progress-bar{
-fx-accent: aquamarine;
}

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

.progress-bar .track{
-fx-background-radius: 0px;
-fx-border-radius: 0px;
-fx-background-color: black;
}

Answer 1

Если вам нужно использовать CSS, я бы использовал linear-gradient.

.progress-bar > .bar {
    -fx-background-color: linear-gradient(to right, aquamarine 90%, red 90%);
}

Вы можете изменить% остановки градиента, чтобы сделать наконечник длиннее (или короче). Вы также можете использовать пиксели вместо%, если предпочитаете наконечник с фиксированным размером.

Обновление

Если вам нужен больший размер, вы не можете сделать это, используя css. Вместо этого вы можете сделать это:

    StackPane progressPane = new StackPane();

    progressPane.setMaxWidth(340);
    progressPane.setMaxHeight(44);
    progressPane.setAlignment(Pos.CENTER_LEFT);

    progressPane.getStyleClass().add("tip-progress-bar");

    ProgressBar progressBar = new ProgressBar();
    progressBar.setPrefWidth(300);
    progressBar.setPrefHeight(8);

    StackPane tip = new StackPane();
    tip.setMinHeight(18);
    tip.setMaxWidth(6);
    tip.getStyleClass().add("tip");

    tip.translateXProperty().bind(progressBar.widthProperty()
            .multiply(progressBar.progressProperty())
            .subtract(tip.widthProperty()));

    progressPane.getChildren().setAll(progressBar, tip);

И CSS:

.tip-progress-bar {
    -fx-padding: 18;
    -fx-background-color: slategray;
}

.tip-progress-bar > .tip {
    -fx-background-color: red;
}

.tip-progress-bar > .progress-bar > .bar {
    -fx-background-color: aquamarine;/*linear-gradient(to right, aquamarine 90%, red 90%);*/
    -fx-background-insets: 0;
    -fx-padding: 2;
    -fx-background-radius: 0;
}

.tip-progress-bar > .progress-bar > .track {
    -fx-background-radius: 0;
    -fx-border-radius: 0;
    -fx-background-color: black;
}

И результат: