Изменить стиль ProgressBar JavaFX

Question

по умолчанию появление ProgressBar является синим баром, который двигается по контролю, как прогресс увеличивается:

У меня есть изображение (поезд) в качестве ресурса мое заявление. Возможно ли, используя CSS (или другой метод), чтобы изображение проходило через элемент управления вместо синей полосы по умолчанию? Это должно выглядеть примерно так:

Answer 1

Просто используйте внешний файл CSS и установить фоновое изображение на панели. Сам бар представлен Region со стилем класса bar (см docs), так что вам просто нужно что-то вроде

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

Полный пример:

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

с поездом-ПРОГРЕСС-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 ; 
} 

Answer 2

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