Exchange the loading indicator

Flow
1

How can I exchange the loading indicator icon?
Which file types are possible (png, gif, jpg)?
Where do I have put the files in my project?

I’m using Vaadin 8.1.7 and Touchkit 5.0.0

Thanks a lot

2

The spinner is defined in the [_gloabal.scss]
(https://github.com/vaadin/framework/blob/2c3df1adfdecdda7747ec63b00ab4a6c5e1315d3/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss#L253-L266) file. You’ll need to replace the default styling by defining your own rule for .v-app-loading:before in your theme file (e.g. mytheme.scss), similar to the code below. Read more about the topic on [this stack overflow thread]
(https://stackoverflow.com/questions/40923684/replace-initial-loading-spinner).

@import "../valo/valo.scss";
@mixin mytheme {
    @include valo;
    .v-app-loading:before {
        width: 36px;
        height: 36px;
        background: url(img/ring.gif) no-repeat 50%;
    }
}