Replace progressbar with Spinkit Spinner

Hi Vaadinteam
I would like to replace the default progressbar “v-loading-indicator” with the spinner from spinkit https://github.com/mcollovati/vaadin-spinkit
Any idea how I generally could do this?

For now I disabled the defaut-lumo indicator, added some css but I fail to connect the Spinner in java with the “v-loading-indicator” from vaadin.
If you could help me out with some examples I would be really happy :slightly_smiling_face:
Working with Vaadin23

For now I have in the MainLayout.java:
Spinner loadingSpinner = new Spinner(SpinnerType.CIRCLE_FADE); loadingSpinner.large(); loadingSpinner.addClassName("v-loading-indicator"); loadingSpinner.setCentered(true); mainVerticalLayout.add(loadingSpinner);

and in the styles.css:

`.v-loading-indicator {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: auto;
z-index: 2147483647;
}

.v-loading-indicator:before {
width: 76px;
height: 76px;

position: absolute;
top: 50%;
left: 50%;

margin: -38px 0 0 -38px;

border-radius: 100%;
animation: bouncedelay 1.2s infinite 0.4s ease-in-out both;
content: “”;
}

.v-status-message {
visibility: hidden;
}

.v-loading-indicator.first:before {
background-color: skyblue;
}

.v-loading-indicator.second:before {
background-color: salmon;
}

.v-loading-indicator.third:before {
background-color: red;
}

@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0);
} 40% {
transform: scale(1.0);
}
}`

I think adding the v-loading-indicator to the spinner is not the way to go.
You can try to add the spinner inside the existing loading indicator div.

A dirty way can be to add the spinner to add the spinner to the UI in a UIInitListener and then move it with javascript

    VaadinServiceInitListener initLoadingIndicator() {
        return event -> {
            event.getSource().addUIInitListener(uiEvent -> {
                Spinner loading = new Spinner(SpinnerType.CIRCLE_FADE)
                        .large().centered().withDisplayBlock();
                Div spinnerContainer = new Div(loading);
                spinnerContainer.setClassName("sk-container");

                UI ui = uiEvent.getUI();
                ui.add(spinnerContainer);
                ui.getLoadingIndicatorConfiguration()
                        .setApplyDefaultTheme(false);
                ui.getPage().executeJs(
                        "$0.querySelector('vaadin-connection-indicator div.v-loading-indicator').appendChild($1)",
                        ui.getElement(), spinnerContainer.getElement());
            });
        };
    }
.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Eat mouse events when visible, doesn't prevent scrolling */
    pointer-events: auto;
    /* Animated with delay to prevent flashing */
    animation: fadein 0.3s ease-out 0.2s normal 1 both;
    z-index: 2147483647;
}
.v-loading-indicator div.sk-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

This seems to work, but during the initial page load you will still see the original indicator

Maybe someone else has better ideas

Known issue with the initial page load, a workaround can be found here https://github.com/vaadin/flow/issues/6824