Kensoft PH
  • Download
  • Contact
  • About
Java Quiz
No Result
View All Result
Kensoft PH
  • Download
  • Contact
  • About
Java Quiz
No Result
View All Result
Kensoft PH
No Result
View All Result
Home Java

ProgressBar in JavaFX with examples | 100% Free for beginner

September 25, 2022 - Updated on October 31, 2022
in Java
Reading Time: 3 mins read
0
JavaFX ProgressBar Website thumbnail
178
VIEWS
Share on FacebookShare on TwitterShare via Email

Contents

  • How to use the ProgressBar in JavaFX
  • JavaFX ProgressBar examples
    • Create the Progress bar and Progress indicator
    • Add the JavaFX ProgressBar and JavaFX ProgressIndicator to the Scene Graph
      • Output
    • JavaFX Task Progress Bar Example
      • Output
    • Styling the node with CSS
  • YouTube Video

How to use the ProgressBar in JavaFX

The ProgressBar in JavaFX is very useful for users if you care about impatient users. This control or node is used to give the user visual feedback about the progress of a specific task, something like downloading, loading the application, or transferring a file. If your application does not have a progress bar, it confuses the user.

JavaFX ProgressBar and JavaFX ProgressIndicator work the same, so I will include the ProgressIndicator here in this tutorial. The difference between the two nodes is that the progress Indicator shows a circle progress while the progress bar shows horizontal progress, and there are two types of state or properties in these nodes:

  • indeterminate state
  • and determinate state.

The indeterminate state works if the system cannot determine the progress of the task and, on the other side, the determinate state can determine the progress of the task and indicates the progress from 0 to 100%. So in this tutorial, you will learn how to use the progress bar in JavaFX and I will walk you through creating the node, adding the node to the scene graph, and show you how to use the progress bar and progress indicator in JavaFX.

JavaFX ProgressBar examples

The first example will be creating the progress bar and other examples to show you and learn more about the progress bar in JavaFX.

Create the Progress bar and Progress indicator

Creating these nodes is very easy. You need to create an instance of its constructor. The following example code below will show you how to create an instance of the progress bar and progress indicator.

// Create an indeterminate state progress indicator and progress bar
ProgressIndicator pi = new ProgressIndicator();
ProgressBar pb = new ProgressBar();

// Create a determinate state progress indicator and progress bar with 70% progress
// Note: the value is a double data type
ProgressIndicator pi = new ProgressIndicator(0.70);
ProgressBar pb = new ProgressBar(0.70);

Add the JavaFX ProgressBar and JavaFX ProgressIndicator to the Scene Graph

Once you created the node manually, meaning you coded to make the progress bar, you need to use the layout in JavaFX. If you are using the Scene Builder you need to use the FXMLLoader class to load the FXML file. The example code below will show you how to add or display the node to the scene graph.

// create a progress bar
ProgressBar pb = new ProgressBar(0);

// Create a button
Button btn = new Button("Make Progress");

// create a layout
VBox layout = new VBox();
layout.getChildren().addAll(pb, btn);

// create the scene
Scene scene = new Scene(layout, 400, 400);
stage.setScene(scene);
stage.show();

Output

JavaFX ProgressBar and JavaFX ProgressIndicator

JavaFX Task Progress Bar Example

In this example, you will learn how to make progress to the ProgressBar in JavaFX.

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.ProgressIndicator;

public class ProgressController {

    @FXML
    private Label labelProgress;

    @FXML
    private ProgressBar progressBar;

    @FXML
    private ProgressIndicator progressIndicator;

    @FXML
    void makeProgress(ActionEvent event) {
        progress(progressIndicator);
        progress(progressBar);
    }

    private void progress(ProgressIndicator p){
        double value = p.getProgress();
        if(value < 0){
            value = 0.1;
        }else{
            value = value + 0.1;
            if(value >= 1.0){
                value = 1.0;
            }
        }
        p.setProgress(value);
        labelProgress.setText("Progress: " + Integer.toString((int) Math.round(value * 100))+ "%");
    }

}

Output

ProgressBar in JavaFX and ProgressIndicator in JavaFX

Styling the node with CSS

JavaFX CSS is almost the same as CSS for web, and it is also easy to use especially if you have a CSS background. In our Progress Bar and Progress Indicator we can apply a style using JavaFX CSS. The following CSS code below will show you the basic styling for the progress bar and progress indicator.

/* This is for progress indicator */
.progress-indicator:indeterminate {
    -fx-progress-color: red;
}
.progress-indicator:determinate {
    -fx-progress-color: blue;
}

/* This is for progress bar */
.progress-bar .track {
 -fx-background-color: lightgray;
 -fx-background-radius: 5;
}
.progress-bar .bar {
 -fx-background-color: blue;
 -fx-background-radius: 5;
}

YouTube Video

Previous Post

6 examples of Text Area in JavaFX | Perfect for beginners

Next Post

How to use the TitledPane in JavaFX | 100% Perfect tutorial

KENSOFT

KENSOFT

What’s up! Kent is my name. The name KENSOFT is derived from the words Kent and Software. My programming language of choice is Java

Related tutorials

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide
Java

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide

March 26, 2023
2
File Chooser in JavaFX Tutorial
Java

File Chooser in JavaFX: 100% Perfect Step-by-Step Guide

March 4, 2023
18
JavaFX TabPane Tutorial
Java

How to use the TabPane in JavaFX | 100% Perfect Tutorial

March 2, 2023
11
Next Post
How to use the TitledPane in JavaFX | 100% Perfect tutorial

How to use the TitledPane in JavaFX | 100% Perfect tutorial

JavaFX Accordion

How to use the Accordion in JavaFX | 100% Perfect Tutorial

JavaFX Pagination

How to use the JavaFX Pagination | 100% Perfect Tutorial

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Maximum upload file size: 20 MB. You can upload: image, audio, video, document, text. Drop files here

  • Trending
  • Comments
  • Latest
Failed to automatically set up a JavaFX Platform

Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

April 11, 2021 - Updated on July 3, 2022
MySQL database using XAMPP

How to connect Java to MySQL database using Xampp server | 100% best for beginners

October 27, 2020 - Updated on January 23, 2023
JavaFX 17

How To install JDK 17 and JavaFX 17 on NetBeans IDE | Best

November 15, 2021 - Updated on December 13, 2021
change the stage icon in JavaFX

How to change the stage icon in JavaFX | 100% best for beginners

May 23, 2021 - Updated on September 24, 2022
Failed to automatically set up a JavaFX Platform

Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

send SMS in java

How to send SMS in Java | 100% best example

3DES in Java and AES in Java

How to use AES and 3DES in Java | 100% best for beginners

JavaFX Splash Screen

How to create JavaFX Splash Screen | 100% best for beginners

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide

March 26, 2023
File Chooser in JavaFX Tutorial

File Chooser in JavaFX: 100% Perfect Step-by-Step Guide

March 4, 2023
JavaFX TabPane Tutorial

How to use the TabPane in JavaFX | 100% Perfect Tutorial

March 2, 2023
How to use the JavaFX ToolBar

How to use the JavaFX ToolBar | 100% Perfect Tutorial

January 24, 2023

Latest Tutorials

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide

March 26, 2023
File Chooser in JavaFX Tutorial

File Chooser in JavaFX: 100% Perfect Step-by-Step Guide

March 4, 2023
JavaFX TabPane Tutorial

How to use the TabPane in JavaFX | 100% Perfect Tutorial

March 2, 2023

Popular Tutorials

  • Failed to automatically set up a JavaFX Platform

    Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

    0 shares
    Share 0 Tweet 0
  • How to connect Java to MySQL database using Xampp server | 100% best for beginners

    0 shares
    Share 0 Tweet 0
  • How To install JDK 17 and JavaFX 17 on NetBeans IDE | Best

    0 shares
    Share 0 Tweet 0
Facebook Instagram Youtube Github LinkedIn Discord
Kensoft PH

What’s up! Kent is my name. The name KENSOFT is derived from the words Kent and Software. My programming language of choice is Java, which I use to create computer applications. In a company, I created applications and a website.

Website

Privacy Policy

Terms and Condition

Sitemap

Services

Guest Post

Fiverr

Freelancer

Upwork

Categories

Website Status

Check the status

Latest Tutorials

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide

March 26, 2023
File Chooser in JavaFX Tutorial

File Chooser in JavaFX: 100% Perfect Step-by-Step Guide

March 4, 2023
JavaFX TabPane Tutorial

How to use the TabPane in JavaFX | 100% Perfect Tutorial

March 2, 2023

© 2023 Made With Love By KENSOFT PH

No Result
View All Result
  • Download
  • Java Quiz
  • Contact
  • About

© 2023 Made With Love By KENSOFT PH

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.