Я создал индикатор выполнения и изменил цвет индикатора.

Можно ли добавить анимацию в индикатор выполнения, например, анимированный индикатор загрузки при загрузке?

Вот пример:ссылка здесь

На самом деле, я нахожу решение, но оно не очень хорошее.

CSS

.progress-bar-1 > .bar {
-fx-background-color: linear-gradient(
    from 0em 0.75em to 0.75em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-2 > .bar {
-fx-background-color: linear-gradient(
    from 0.25em 0.75em to 1em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-3 > .bar {
-fx-background-color: linear-gradient(
    from 0.5em 0.75em to 1.25em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-4 > .bar {
-fx-background-color: linear-gradient(
    from 0.75em 0.75em to 1.5em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-5 > .bar {
-fx-background-color: linear-gradient(
    from 1em 0.75em to 1.75em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-6 > .bar {
-fx-background-color: linear-gradient(
    from 1.25em 0.75em to 2em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-7 > .bar {
-fx-background-color: linear-gradient(
    from 1.5em 0.75em to 2.25em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-8 > .bar {
-fx-background-color: linear-gradient(
    from 1.75em 0.75em to 2.5em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-9 > .bar {
-fx-background-color: linear-gradient(
    from 2em 0.75em to 2.75em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-10 > .bar {
-fx-background-color: linear-gradient(
    from 2.25em 0.75em to 3em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-11 > .bar {
-fx-background-color: linear-gradient(
    from 2.5em 0.75em to 3.25em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

.progress-bar-12 > .bar {
-fx-background-color: linear-gradient(
    from 2.75em 0.75em to 3.5em 0px,
    repeat,
    -fx-accent 0%,
    -fx-accent 49%,
    derive(-fx-accent, 30%) 50%,
    derive(-fx-accent, 30%) 99%
);}

Я создаю 12 CSS. И используйте AnimationTimer, чтобы зациклить эти 12 CSS.

Подобно:

    String str = "progress-bar-%d";
    progress.getStyleClass().add(String.format(str, i));
    AnimationTimer timer = new AnimationTimer(){
        @Override
        public void handle(long l){
            if(j != 10) {j++; return;}
            j = 0;
            progress.getStyleClass().removeAll(String.format(str, i));
            i++;
            if(i == 13){
                i = 1;
            }
            progress.getStyleClass().add(String.format(str, i));
        }
    };
    timer.start();

FXML

<ProgressBar fx:id="progress" prefWidth="200"  progress="0.5"  />