So here is a brief explanation for you

If you want to replace the default spinning loader, you need to change the color settings so it is transparent

Then you need to use the ārepeating group is loadingā conditionals to hide or show the spinner

Then you can replace the repeating group spinner with an animated loaderā¦personally, Iām not using loaders in this way, instead I place them as a āfull page loaderā and the problem I had is that the free plugins do not work in reusable elements, so I was happy to find a solution.

Of course if you want to use something like this to replace the loading spinner of the RG it needs a bit more work to avoid the jankiness caused by the repeating group displaying after load

Here is the set up for this loader

```
<style>
.loader {
height: 100%;
background-color: white;
background-image:
radial-gradient(
#5076c1 30%,
hsla(0,40%,100%,0) 35%
),
radial-gradient(
#5076c1 30%,
hsla(0,40%,100%,0) 35%
),
radial-gradient(
#5076c1 30%,
hsla(0,40%,100%,0) 35%
),
radial-gradient(
#5076c1 30%,
hsla(0,40%,100%,0) 35%
),
radial-gradient(
#5076c1 30%,
hsla(0,40%,100%,0) 35%
),
radial-gradient(
#5076c1 30%,
hsla(0,40%,100%,0) 35%
),
radial-gradient(
#5076c1 30%,
hsla(0,40%,100%,0) 35%
),
radial-gradient(
#5076c1 30%,
hsla(0,40%,100%,0) 35%
);
background-position:
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%;
background-size: 1.5em 1.5em;
background-repeat: no-repeat;
animation: bloom 2.5s infinite;
}
@keyframes bloom {
6.25% {
background-position:
50% calc(50% - 1.5em),
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%;
}
12.5% {
background-position:
50% calc(50% - 1.5em),
calc(50% + 1em) calc(50% - 1em),
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%;
}
18.75% {
background-position:
50% calc(50% - 1.5em),
calc(50% + 1em) calc(50% - 1em),
calc(50% + 1.5em) 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%;
}
25% {
background-position:
50% calc(50% - 1.5em),
calc(50% + 1em) calc(50% - 1em),
calc(50% + 1.5em) 50%,
calc(50% + 1em) calc(50% + 1em),
50% 50%,
50% 50%,
50% 50%,
50% 50%;
}
31.25% {
background-position:
50% calc(50% - 1.5em),
calc(50% + 1em) calc(50% - 1em),
calc(50% + 1.5em) 50%,
calc(50% + 1em) calc(50% + 1em),
50% calc(50% + 1.5em),
50% 50%,
50% 50%,
50% 50%;
}
37.5% {
background-position:
50% calc(50% - 1.5em),
calc(50% + 1em) calc(50% - 1em),
calc(50% + 1.5em) 50%,
calc(50% + 1em) calc(50% + 1em),
50% calc(50% + 1.5em),
calc(50% - 1em) calc(50% + 1em),
50% 50%,
50% 50%;
}
43.75% {
background-position:
50% calc(50% - 1.5em),
calc(50% + 1em) calc(50% - 1em),
calc(50% + 1.5em) 50%,
calc(50% + 1em) calc(50% + 1em),
50% calc(50% + 1.5em),
calc(50% - 1em) calc(50% + 1em),
calc(50% - 1.5em) 50%,
50% 50%;
}
50% {
background-position:
50% 50%,
calc(50% + 1em) calc(50% - 1em),
calc(50% + 1.5em) 50%,
calc(50% + 1em) calc(50% + 1em),
50% calc(50% + 1.5em),
calc(50% - 1em) calc(50% + 1em),
calc(50% - 1.5em) 50%,
calc(50% - 1em) calc(50% - 1em);
}
56.25% {
background-position:
50% 50%,
50% 50%,
calc(50% + 1.5em) 50%,
calc(50% + 1em) calc(50% + 1em),
50% calc(50% + 1.5em),
calc(50% - 1em) calc(50% + 1em),
calc(50% - 1.5em) 50%,
calc(50% - 1em) calc(50% - 1em);
}
62.5% {
background-position:
50% 50%,
50% 50%,
50% 50%,
calc(50% + 1em) calc(50% + 1em),
50% calc(50% + 1.5em),
calc(50% - 1em) calc(50% + 1em),
calc(50% - 1.5em) 50%,
calc(50% - 1em) calc(50% - 1em);
}
68.75% {
background-position:
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% calc(50% + 1.5em),
calc(50% - 1em) calc(50% + 1em),
calc(50% - 1.5em) 50%,
calc(50% - 1em) calc(50% - 1em);
}
75% {
background-position:
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
calc(50% - 1em) calc(50% + 1em),
calc(50% - 1.5em) 50%,
calc(50% - 1em) calc(50% - 1em);
}
81.25% {
background-position:
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
calc(50% - 1.5em) 50%,
calc(50% - 1em) calc(50% - 1em);
}
87.5% {
background-position:
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
50% 50%,
calc(50% - 1em) calc(50% - 1em);
}
}
</style>
```