Replace your loading spinner with an animated image!

I wanted to make a nice loading graphic for a project I’m working on. Riffing off of @daviesian’s post I found a really nice collection of CSS animations on Animate.style. I then copied the “keyframes” to my theme.css and was able to get this:

ezgif.com-gif-maker (4)

Here is the process:

  1. Go to Animate.style and pick which animation you want.
  2. Download their minified JS that is linked.
  3. Unminify it so you can read it without losing your mind with https://unminify.com/.
  4. Find the “keyframes” you want. Be sure to copy the webkit and plain ones.
  5. Paste in to your theme.css similar to what you see below.
/* Custom Spinner */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
#loadingSpinner {
    -webkit-animation: pulse;
    animation: pulse;
  	animation-duration: 1s;
    animation-iteration-count: infinite;
    width: 300px;
    height:70px;
    margin-left: -120px;
    border-radius: 0;
    box-shadow: none;/*0px 0px 10px 10px #fcfcfc;*/
    background-color: transparent;
    background-image: url(https://app-name.anvil.app/_/theme/image.png) !important;
}

Notes:

  1. animation uses the name of the animation in the keyframe. Pay attention to capitalization.
  2. animation-duration can be used to speed up or slow down the animation.
  3. You will want to change your width and height to fit your image.
  4. Once you change the size you will find that your image is no longer centered! Hack around this by changing the margin-left to a negative value until it looks right. If you know a better way to do this please tell me…

Original Post:
Possible to customize the little Anvil spinny ball?

P.S. I’ll be sure to post about this project once it’s done. We will be launching next week.

11 Likes

@robert This was helpful for me to get animation working on my website. Thanks for the intuitive walkthrough.

My bit to add. If you want to streamline the process and avoid the copy and paste of specific keyframe calls, you can simply reference the animate.css from where it is hosted. Then all that’s needed is the #loadingSpinner section from above.

To do this, place the snippet below in your Native Libraries section:

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
2 Likes

Agreed good point on the CDN.

I chose to use the keyframe calls because this server will be located where the CDN may load slowly at unpredictable times. Generally this won’t be a problem for 99% of people I would guess though.

Your code didn’t work with me but it disabled the loading spinner so it’s a win-win. I also realised a very easy way to do things once you disable the loading spinner.

 def text_area_1_change(self, **event_args):
    self.button_5.text='Saving...'
    self.button_5.background='grey'
    self.button_5.enabled=False
    t=app_tables.stories.get(Title=Module1.work,Author=anvil.users.get_user()['username'])
    if t['Drafts']!=None:
      t['Drafts'][self.text_box_1.text]=self.text_area_1.text
      self.button_5
      self.button_5.text='Save & Exit'
      self.button_5.background='#006eff'

Things might be cached, it’s tricky to ensure you are seeing what is right from the app with static assets and caching. Try publishing and using an incognito window each time. It’s annoying but it’s the only way I feel comfortable tweaking things in the HTML and CSS stuff.

If you are looking for a way to make server calls with no spinner there are a couple of options in the docs

https://anvil.works/docs/server#suppressing-the-spinner

1 Like

Yeah. But it is all right now. The thing is, I want to make a sort of autosave feature so that whenever the value in textarea will be changed, it will automatically be added to the data table. But the annoying loading spinner when users are typing was a bother. But I also needed something to let the users know their work is being saved right now so don’t exist. I realised that now I can add any alert, image or text I want to appear while something is being saved

1 Like