Python3 Set loading spinner as a custom gif

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