css - 如何更改进度条的宽度？

Question

我使用 css 自定义了 progress bar 但是当我为 .bar 使用 -fx-pref-width 它没有工作。这是我的 CSS:

.super-fx-progress-bar {

    -fx-background-color: transparent;

}

.super-fx-progress-bar .track{

    -fx-background-color: transparent;
    -fx-border-radius:20;
    -fx-background-radius:20;

}

.super-fx-progress-bar .bar { 

    -fx-background-color: #0057e7,transparent,#6666ff;
    -fx-background-insets: 1 1 1 3, 1 1 1 1, 1 1 2 3; 
    -fx-border-radius:20;
    -fx-background-radius:20;
    -fx-pref-width:2

     /*What should i add to minimize width of bar when its value is indeterminated*/

}

Answer 1

您可以通过添加:

-fx-indeterminate-bar-length:value;  

在 progressbar 类中(您使用了 .super-fx-progress-bar):

我这样做是为了显示不同的结果:

第一种风格:

.super-fx-progress-bar {

    -fx-background-color: transparent;
    -fx-indeterminate-bar-animation-time:1.0;
    -fx-indeterminate-bar-flip:true;
    -fx-indeterminate-bar-escape:true;
    -fx-indeterminate-bar-length:20;
    -fx-min-height:5;


}

第二种风格:

.super-fx-progress-bar {

    -fx-background-color: transparent;
    -fx-indeterminate-bar-animation-time:1.0;
    -fx-indeterminate-bar-flip:true;
    -fx-indeterminate-bar-escape:true;
    -fx-indeterminate-bar-length:60;
    -fx-min-height:5;


}