CODEWITHSUNDEEP
javafx
user13632019
user13632019

Reputation:

Is it possible to enlarge the tip of the progress bar in JavaFX?

a

Is it possible to make the progress tip (the end that has been shown in the image) larger or just different?

Here is my CSS code for the progress bar:


.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;
}

Upvotes: 1

Views: 165

Answers (1)

Oboe
Oboe

Reputation: 2723

If you need to use CSS I would use linear-gradient.

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

You can modify the % of the gradient stop to make the tip longer (or shorter). You can also use px instead of % if you prefer a fix size tip.

Update

If you need a higher tip you can't do it using css. Instead, you could do this:

    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);

And the 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;
}

And the result:

TipProgressBar

Upvotes: 3

Related Questions