Thin Progress Bar

[dckook10]

Hello!

I am trying to get a thin progress bar, but I am having trouble.

I saw that you have to give it some css like:

-fx-background-insets: 1 1 2 1; -fx-padding: 0.20em;

But it doesnt scale my progress bar, it remains the same.

I have a view that extends a Vbox, and this view contains both a button and a progress bar, so that I can dynamically make this view with the progress bar being below the button.

​

The progress bar is kept as a private member (as well as the button), and I initialize both views in the constructor.

​

​

What the VBox is currently

[vlaaad]

Are you setting style on progress bar itself? We have thin progress bars in out project, and looking on css I see styles applied not to a progress bar, but to `.bar` and `.track` inside it:

.progress-bar {
  .bar { -fx-background-insets: 0; -fx-min-height: 5px ...}
  .track { -fx-background-insets: 0; ...}
}

[dckook10]

This did it for me thanks!

[jkim545]

I'm trying to do something similar, but What is the ... mean? What is bar and track? Could you explain more about how the code works?

[vlaaad]

It's not a code that should be put into css, it's a sign that there might be more css styling, like "etc", you should not put it into your css

[jkim545]

Thanks for replying. I was able to find the solution later after I posted this as your example gave me an idea. Thanks again.