ProgressIndicator transparent background - css

Question

So I have this code:
final StackPane g = new StackPane();
final ProgressIndicator p1 = new ProgressIndicator();
p1.setPrefSize(100, 100);
p1.progressProperty().addListener(new ChangeListener<Number>() {
#SuppressWarnings("rawtypes")
#Override
public void changed(ObservableValue ov, Number oldVal, Number newVal) {
if (p1.getProgress() < 0.3) {
p1.setStyle("-fx-progress-color: red;");
} else if (p1.getProgress() < 0.65) {
p1.setStyle("-fx-progress-color: orange;");
} else {
p1.setStyle("-fx-progress-color: green;");
}
}
});
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.setAutoReverse(true);
final KeyValue kv = new KeyValue(p1.progressProperty(), 1);
final KeyFrame kf1 = new KeyFrame(Duration.millis(3000), kv);
timeline.getKeyFrames().add(kf1);
g.getChildren().addAll(p1); //veil
g.setAlignment(Pos.CENTER);
Then I add the stack pane to a scene and the scene to the stage.
I have two stages, the initial stage with all my things and this additional stage with the progress indicator. Here is the problem: the stage that contains the progress indicator has a white squared(box) as background that fits perfect to the other stage, because usually has the same white background. But when the initial background is not white I can see the white background of the progress indicator stage. So here is my question: How can I make this background transparent? I tried the BlendMode class, but this doesn't seem to work. Any ideas?
Thanks in advance!

Answer 1

Use an external style sheet with
.progress-indicator .indicator {
-fx-background-color: transparent ;
}
Here's a complete example (I used the external style sheet to manage the colors too, but this will work anyway):
import javafx.application.Application;
import javafx.application.Platform;
import javafx.concurrent.Task;
import javafx.css.PseudoClass;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Control;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class ProgressIndicatorTest extends Application {
#Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
ProgressIndicator pi = new ProgressIndicator();
Task<Void> counter = new Task<Void>() {
#Override
public Void call() throws Exception {
for (int i = 1; i <= 100; i++) {
Thread.sleep(50);
updateProgress(i, 100);
}
return null;
}
};
pi.progressProperty().bind(counter.progressProperty());
pi.progressProperty().addListener((obs, oldProgress, newProgress) -> {
PseudoClass warning = PseudoClass.getPseudoClass("warning");
PseudoClass critical = PseudoClass.getPseudoClass("critical");
if (newProgress.doubleValue() < 0.3) {
pi.pseudoClassStateChanged(warning, false);
pi.pseudoClassStateChanged(critical, true);
} else if (newProgress.doubleValue() < 0.65) {
pi.pseudoClassStateChanged(warning, true);
pi.pseudoClassStateChanged(critical, false);
} else {
pi.pseudoClassStateChanged(warning, false);
pi.pseudoClassStateChanged(critical, false);
}
});
pi.setMaxSize(Control.USE_PREF_SIZE, Control.USE_PREF_SIZE);
root.setStyle("-fx-background-color: antiqueWhite;");
root.getChildren().add(pi);
Scene scene = new Scene(root, 400, 400);
scene.getStylesheets().add("progress.css");
primaryStage.setScene(scene);
primaryStage.show();
new Thread(counter).start();
}
public static void main(String[] args) {
launch(args);
}
}
progress.css:
.progress-indicator .indicator {
-fx-background-color: transparent ;
}
.progress-indicator {
-fx-progress-color: green ;
}
.progress-indicator:critical {
-fx-progress-color: red ;
}
.progress-indicator:warning {
-fx-progress-color: orange ;
}

Answer 2

Try this for css (based on a bugfix for Java 8u40):
.progress-indicator:indeterminate > .spinner {
/** Applying to undo styling from .spinner, reported in RT-37965 */
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
}

Answer 3

For me, none of the above answers worked.
I finally got it working by:
progressIndicator.getScene().getRoot().setStyle("-fx-background-color: transparent");
If you are using a scene, make the scene transparent by also doing:
scene.setFill(null);