What I’m trying to do:
I am trying to change the loading spinner to a gif I have in my assets library.
What I’ve tried and what’s not working:
I spent hours looking at the popular Q&A for this problem but I have yet to find a working solution to inout into theme.css. I’m assuming that all you have to do is input code into CSS and it will change the loading spinner, so maybe I am missing something there?
Code Sample:
display: none; /* Ensures spinner is hidden by default */
position: fixed;
z-index: 9999;
top: 50%;
left: 50%;
width: 100px; /* Width of your custom spinner */
height: 100px; /* Height of your custom spinner */
margin: -50px 0 0 -50px;
background-image: url('_/theme/Visuals/Animations/Dalgona_Loading.gif'); /* Custom spinner from Assets */
background-size: cover;
}
#loadingSpinner {
display: none; /* Ensures spinner is hidden by default */
position: fixed;
z-index: 9999;
top: 50%;
left: 50%;
width: 100px; /* Width of your custom spinner */
height: 100px; /* Height of your custom spinner */
margin: -50px 0 0 -50px;
background-image: url('_/theme/Visuals/Animations/Dalgona_Loading.gif'); /* Custom spinner from Assets */
background-size: cover;
}
Welcome to the forum!
You don’t say which other posts you’ve used as reference. I went to this one Possible to customize the little Anvil spinny ball? - #7 and pasted their CSS into my Native Libraries section between style tags, and it just worked.
Then when I tried it using a file in Assets like you are with a relative reference, it stopped working.
When I updated the CSS to use an absolute reference (e.g. including the full https://etc domain before /_/theme/etc), it started working again.
So as a first step you might try updating your URL to be a full URL. If that doesn’t work, check the post I linked and see where your CSS is different.
2 Likes
I’ve got a custom loading spinner working with these 2 css features:
#loadingSpinner {
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
width: 100px;
height: 100px;
border-radius: 0;
z-index: 1234567;
box-shadow: none;/*0px 0px 10px 10px #fcfcfc;*/
background-color: transparent;
background-position: center;
background-image: url('_/theme/spinner.gif');
position: absolute; /* or 'fixed' if you need it to be in the same place regardless of scrolling */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
@media (max-width: 767px) {
#loadingSpinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
4 Likes