java - Change style of progressbar javaFX -


the default appearance of progressbar blue bar moves across control progress increases:

enter image description here

i have image (of train) resource in application. possible, using css (or technique) have image progress across control instead of default blue bar? should like:

enter image description here

just use external css file , set background image on bar. bar represented region style class bar (see docs), need 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 {                     (int = 0; < 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 ; } 

Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -