CODEWITHSUNDEEP
javajavafx
MiLo
MiLo

Reputation: 126

Change style of progressbar javaFX

The default appearance of a ProgressBar is a blue bar that moves across the control as the progress increases:

enter image description here

I have an image (of a train) as a resource in my application. Is it possible, using CSS (or another technique) to have the image progress across the control instead of the default blue bar? It should look something like:

enter image description here

Upvotes: 1

Views: 4552

Answers (2)

Ambala Chandrashekar
Ambala Chandrashekar

Reputation: 532

   .parentOfProgress {
    padding: 1px;
    border: 1px solid #808080;
    width: 144px;
}
progress {
    height:5px !important;
    background: #fafafa !important;
}

    progress::-webkit-progress-bar {
        background: #fafafa !important;
        height: 5px !important;
    }

    progress::-webkit-progress-value {
        background: #06c !important;
    }

    progress::-moz-progress-bar {
        background: #fafafa !important;
        height: 5px !important;
    }

Upvotes: 1

James_D
James_D

Reputation: 209225

Just use an external CSS file and set a background image on the bar. The bar itself is represented by a Region with style class bar (see docs), so you just need something like

.progress-bar > .bar {
    -fx-background-image: url("http://upload.wikimedia.org/wikipedia/commons/c/ce/Train_icon_small.png");
    -fx-background-position: right ;
    -fx-background-color: transparent ;
    -fx-background-repeat: repeat-x ;
}

Complete example:

import javafx.application.Application;
import javafx.concurrent.Task;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class TrainProgressBar extends Application {

    @Override
    public void start(Stage primaryStage) {
        ProgressBar progressBar = new ProgressBar();
        progressBar.setProgress(0);
        Button startButton = new Button("Start");
        startButton.setOnAction(e -> {
            startButton.setDisable(true);
            Task<Void> task = new Task<Void>() {
                @Override
                public Void call() throws Exception {
                    for (int i = 0; i < 100; i++) {
                        Thread.sleep(20);
                        updateProgress(i, 100);
                    }
                    updateProgress(100, 100);
                    return null ;
                }
            };
            progressBar.progressProperty().bind(task.progressProperty());
            task.setOnSucceeded(evt -> startButton.setDisable(false));
            new Thread(task){{setDaemon(true);}}.start();
        });

        VBox root = new VBox(15, progressBar, startButton);
        Scene scene = new Scene(root, 250, 100);
        scene.getStylesheets().add("train-progress-bar.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

with train-progress-bar.css:

.root {
    -fx-padding: 10 ;
    -fx-alignment: center ;
}

.progress-bar > .bar {
    -fx-background-image: url(http://upload.wikimedia.org/wikipedia/commons/c/ce/Train_icon_small.png);
    -fx-background-position: right ;
    -fx-background-color: transparent ;
    -fx-background-repeat: repeat-x ;
}

Upvotes: 2

Related Questions