Forum Academy Marketplace Showcase Pricing Features

Simple Animated Loader Code

I found this from this site

https://www.w3schools.com/howto/howto_css_loader.asp

I set it up in my app like this

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>
5 Likes

Nice tip. Thanks for sharing!

How do we actually use this for data loads like in repeating groups? I don’t get why this is useful.

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

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.

Sure I know what a loader is… but how can I replace the default repeating group spinner with this code?

If want to make some animations I can use lottiefiles.

How do you use lottiefiles for animations?


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

No thanks, it’s actually really easy to use anyway.
Could you answer this?

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.

You’re hilarious!

I felt like you have some pretty good jokes too.

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

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.

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

<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>
2 Likes

Ah I see, this kind of hacky approach is not what i’m looking for.

Thanks for trying anyway.

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.

What are you looking to do?

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

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

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