ecaveo
April 14, 2025, 9:17pm
1
Just for fun (and acknowledging Pickaxe HQ may change the underlying code at any time…).
Anyway… I’ve never like the spinner that appears when an Action is triggered (and would really like the option to change it) so I’ve restyled it… welcome to the Knight Rider!
VIDEO
3 Likes
Very nice
will you be sharing how you did it ?
ecaveo
April 15, 2025, 12:17am
3
I’ve posted a few times and the simplest way to work it out is to look at the source of my studio page.
You just need to establish the classes of css to play with… this one is done entirely form within the CSS - Start from here…
div[style*="pointer-events: none"] svg {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
To hide the existing spinner and then work out what loader/spinner you want to style and inject it.
div[style*="pointer-events: none"] {
overflow: hidden !important;
background-color: transparent !important;
position: relative !important;
display: block !important;
}
div[style*="pointer-events: none"]::after {
content: "";
position: absolute;
top: 0;
left: -50%;
height: 100%;
width: 50%;
background-color: #a80512;
border-radius: 10px;
animation: slideBackAndForth 1.5s linear infinite alternate;
z-index: 1;
}
@keyframes slideBackAndForth {
from { left: -50%; }
to { left: 100%; }
}
1 Like
Love this! Nice work, it looks great