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>