The weweb's official loader animation in the editor that appears for the first time when page is loaded

[aliza]

The data for my weweb website takes a few seconds to load, and I was wondering if there is any way I can have this type of loader for my main website. If yes, then where can I find it?

[Alexis]

We have a loader element with an option to choose different shape. A lot of people are using it to achieve the same thing with it

[aliza]

Thank you Alexis! I am already using this one but for the first time loading the page I was thinking of something similar to the weweb’s original loader

[Alexis]

You can use our HTML element and copy/paste anything you found on internet if you don’t know how to achieve it with our editor.

<span class="loader"></span>
<style>
.loader {
  width: 100%;
  height: 4.8px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.loader::after {
  content: '';  
  width: 96px;
  height: 4.8px;
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: WeWeb 0.6s ease-in-out infinite alternate;
}

@keyframes WeWeb {
  0% {
    left: 0;
    transform: translateX(-1%);
  }
  100% {
    left: 100%;
    transform: translateX(-99%);
  }
}
    
</style>

Put a dark background color on the html element and it should show up

You can find more animation on this website => https://cssloaders.github.io/

[aliza]

Thank You!! Your reply was very helpful

[WimDC]

Nice, but how can I make the loader disappear once the collection is loaded?

[sam1]

you could try binding to the is fetched on the collection

[WimDC]

Thanks, it works together with the conditional rendering of the element

Met een vriendelijke groet,

Wim De Coninck

22 mei 2025 01:33:04 sam via WeWeb Community <notifications@weweb.discoursemail.com>: