Simple Animated Loader Code

Tips
1

I found this from this site

I set it up in my app like this

Screen Shot 2020-12-13 at 12.52.33 AM
Screen Shot 2020-12-13 at 12.52.33 AM342Ɨ779 38.9 KB
Screen Shot 2020-12-13 at 12.52.19 AM
Screen Shot 2020-12-13 at 12.52.19 AM340Ɨ783 30.6 KB

All I did was take the example code from the site and put it into the HTML element and then added the ID attribute

As a side note, I am not sure if installing the classify plugin is a required for this to work or not, but I have the classify plugin installed in the app already, so it may be

This is it in action

loader

<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
6 Likes
2

Nice tip. Thanks for sharing!

4

Here is another cool oneā€¦this is just an HTML elementā€¦I have mine set to 250px by 250px

loader 2

<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
<style>
/* The loader container */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: 200px;
  height: 200px;
  
  margin-top: -100px;
  margin-left: -100px;
}


/* The dot */
.loader > .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;

  width: 160px;
  height: 100px;
  
  margin-top: -50px;
  margin-left: -80px;

  border-radius: 5px;

  background-color: #1e3f57;

  transform-type: preserve-3d;

  animation: dot1 3s cubic-bezier(.55,.3,.24,.99) infinite;
}

.loader > .dot:nth-child(2) {
  z-index: 11;
  
  width: 150px;
  height: 90px;
  
  margin-top: -45px;
  margin-left: -75px;
  
  border-radius: 3px;
  
  background-color: #3c617d;
  
  animation-name: dot2;
}

.loader > .dot:nth-child(3) {
  z-index: 12;
  
  width: 40px;
  height: 20px;
  
  margin-top: 50px;
  margin-left: -20px;
  
  border-radius: 0 0 5px 5px;
  
  background-color: #6bb2cd;
  
  animation-name: dot3;
}

@keyframes dot1 {
  3%, 97% {
    width: 160px;
    height: 100px;

    margin-top: -50px;
    margin-left: -80px;
  }
  30%, 36% {
    width: 80px;
    height: 120px;

    margin-top: -60px;
    margin-left: -40px;
  }
  63%, 69% {
    width: 40px;
    height: 80px;

    margin-top: -40px;
    margin-left: -20px;
  }
}

@keyframes dot2 {
  3%, 97% {
    width: 150px;
    height: 90px;

    margin-top: -45px;
    margin-left: -75px;
  }
  30%, 36% {
    width: 70px;
    height: 96px;

    margin-top: -48px;
    margin-left: -35px;
  }
  63%, 69% {
    width: 32px;
    height: 60px;

    margin-top: -30px;
    margin-left: -16px;
  }
}

@keyframes dot3 {
  3%, 97% {
    width: 40px;
    height: 20px;

    margin-top: 50px;
    margin-left: -20px;
  }
  30%, 36% {
    width: 8px;
    height: 8px;

    margin-top: 49px;
    margin-left: -5px;
    
    border-radius: 8px;
  }
  63%, 69% {
    width: 16px;
    height: 4px;

    margin-top: -37px;
    margin-left: -8px;
    
    border-radius: 10px;
  }
}
<style>
3 Likes
5

When data is loading or a page is loading, it is better to show that ā€˜things are happeningā€™ so the user understands that something is happening and they should waitā€¦that is primarily what loaders are for.

So if your repeating group data is loading and you want the user to understand that, then you would show the loader as the repeating group data is loading.

7

How do you use lottiefiles for animations?

9

Seems a bit to complicated to try to understandā€¦post a tip on how to use it; Iā€™m sure a lot of other users would find that useful

11

Yes, I could answer thatā€¦if you need tutoring, I do private lessons, usually by request. Shoot me a PM and we can set something up.

13

I felt like you have some pretty good jokes too.

14

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

RG Spinning Color
RG Spinning Color1907Ɨ317 36.2 KB

RG Spinning Color Transparent
RG Spinning Color Transparent1908Ɨ320 36.1 KB

Then you need to use the ā€˜repeating group is loadingā€™ conditionals to hide or show the spinner

Screen Shot 2020-12-14 at 1.50.28 AM

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.

spinner

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

Screen Shot 2020-12-14 at 1.53.06 AM
Screen Shot 2020-12-14 at 1.53.06 AM342Ɨ722 29.8 KB

<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>
3 Likes
16

Itā€™s not a hacky approach, itā€™s the way to do if you want to get rid of the original bubble spinner.

Fortunately youā€™ll find a better way to do, by your own.

17

What are you looking to do?

18

Hi Boston :slight_smile:
Hope you are doing great!

I came across your post, great stuff! However, in my app I donā€™t have the ā€œis loadingā€ condition on eg. a spinner or a group. Do you have any clue why?

Cheers,

Peter

19

Because is the is loading is a value put out by a repeating group, not on a spinner or a group. You need a repeating group on the page, reference that repeating group and then access the operator :is loading

20

You can use it with the html element
Just select your animation in Lottie and click in html code an copy paste into the html element

22

My mistake! I choose the ā€œlist of thingsā€ in the 2. part therefore i was not able to have ā€œis loadingā€. case solved :laughing:

Thanks buddy!

23

Just added a youtube video for how to utilize and customize lottie files in your app

Lottie Files Animations