JavaFX circular progressindicator not working as expected

Question

So I'd like to make a circular progress indicator that runs smoothly from start to end, although I haven't found exactly what I'm looking for, I found a workaround using the class "ProgressIndicator" and grouping it in a way that is shown as I want it to.

I tried running this code that creates a timeline for it to do such smooth result I was looking for (this code isn't mine at all, took it from https://asgteach.com/2011/10/javafx-animation-and-binding-using-the-progressbar/) but it doesn't work as intended at all. The end result should be looking like this from start to end: expectation

Although it takes some time to load showing this animation: reality

Is there any way to make that starting animation not appear and make it so it starts instantly? If you have better options for what I'm trying to achieve or a solution using the existing progressIndicator I'm trying to use, I'll gladly hear them out.

The code I'm trying to run right now:

private static final Integer STARTTIME = 30;
private Timeline timeline;
private IntegerProperty timeSeconds = new SimpleIntegerProperty(STARTTIME*100);

public void testProgressIndicator() {
    myProgressIndicator.progressProperty().bind(
            timeSeconds.divide(STARTTIME*100.0).subtract(1).multiply(-1));
    btnTest.setOnAction(new EventHandler<ActionEvent>() {

        public void handle(ActionEvent event) {
            if (timeline != null) {
                timeline.stop();
            }
            timeSeconds.set((STARTTIME+1)*100);
            timeline = new Timeline();
            timeline.getKeyFrames().add(

                    new KeyFrame(Duration.seconds(STARTTIME+1),
                    new KeyValue(timeSeconds, 0)));
            timeline.playFromStart();
        }
    });