JavaFX: Progress-Bar CSS Styling

Posted: Mai 29th, 2014 | Filed under: Java | Tags: , , , , , , | 3 Comments »

In my opinion the JavaFX CSS Reference Guide is not well elaborated. With the help of screenshots and concrete examples it would be much easier to understand the explanations. Therefore I started https://github.com/frankred/JavaFX-Tutorials to give you some examples for specific components.

In the following post the progress-bar component is introduced.

Progress-Bar Tutorial

.progress-bar {
    -fx-background-color: yellow;
    -fx-background-radius: 10, 10, 10, 10;

}

.progress-bar .track{
    -fx-background-color: green;
    -fx-background-insets: 20;
    -fx-background-radius: 6, 6, 6, 6;
}

.progress-bar .bar { 
    -fx-background-color: grey;
    -fx-background-insets: 30, 30, 30, 30; 
    -fx-background-radius: 4, 4, 4, 4;
}

Feel free to copy and paste everything!

Ähnliche Beiträge:

  1. Gastbeitrag: Swing Komponenten in JavaFX 8 verwenden Seit der aktuellen Version von JavaFX 8 ist es möglich...
  2. jSona: Simple JavaFX based music player Hey, today I want you to introduce my new project...
  3. Mit Java etwas in die Zwischenablage schreiben Heute mal noch ein bisschen Java Quellcode. Ich hatte vor...
  4. Java JButton und ActionListener Hier ein kleines Beispiel für alle Java Swing Neulinge. Mit...
  5. Java TableLayout Beispiel / Example Oft benutzte ich in meinen Anwendungen das praktische TableLayout. Es...

3 Comments on “JavaFX: Progress-Bar CSS Styling”

  1. 1 McKey said at 10:31 on September 3rd, 2014:

    danke für die großartige erklärung, ich versuch grad n bisschen was mit javafx zu machen, aber die css dokumentation ist für mich ein buch mit 7 siegeln… 😐

  2. 2 admin said at 13:07 on September 3rd, 2014:

    Absolut mir geht es genau so. Ich finde es fehlen einfach Beispiele mit entsprechenden Screenshots…

  3. 3 Will said at 15:46 on Oktober 16th, 2019:

    Sehr gute Idee und dieser erste Artikel war sehr aussichtsvoll.
    Schade dass du das Konzept nicht weiterentwickelt hast …

Leave a Reply