如何更改进度条的条宽？

Question

我使用css自定义了porgressbar，但当我使用-fx-pref-width .bar时，它无效。这是我的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;


}