I need change loading spinner to a gif

HasanMerkit

We have a loading gif since few years and i want to change loading spinner to this gif. But i see Flarum not using gif format for loading spinner.

Any idea?

Valeyard

Jeez you identified the element so easy peasy. Here's the existing CSS:

.LoadingIndicator {
  --spin-time: 750ms; 
  border-color: currentColor;
  border-width: var(--thickness);
  border-style: solid;
  border-top-color: transparent;
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  animation: spin var(--spin-time) linear infinite;
}

HasanMerkit

Valeyard no no, i not want edit current spinner. I need replace with an <img> code for using custom Gif.

Valeyard

HasanMerkit You just need to change all the values above to what you need and set the background image as @clarkwinkelmann said. E.g.

.LoadingIndicator {
  border-radius: 0;
  border: none;
  width: 36px;
  height: 36px;
  animation: none;
  background-image: url(/images/loader.gif);
}

clarkwinkelmann

The easiest solution is probably to use CSS to set a background-image to the spinner element.

Using the Flarum javascript API it's also possible to replace the template for the spinner element, but I can't think of any existing code example to refer to.