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

Ask us anything How do I?
, ,
1

Weweb Loader
Weweb Loader1366×615 12.9 KB

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?

2

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 :slight_smile:

Capture d’écran 2023-10-26 à 15.59.21
Capture d’écran 2023-10-26 à 15.59.211631×961 99.9 KB

3

Thank you Alexis! :smiley: 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 :slightly_smiling_face:

4

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 :slight_smile:

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

1 Like
5

Thank You!! Your reply was very helpful :smiley:

1 Like