Reputation:
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
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:
Upvotes: 3