How to embed this Beautiful Pre Loader

Design help Custom code
1

What would the steps be like of integrating this PreLoader in Webflow??
Thanks so much!

1 Like
2

That’s quite a beautiful loader :hushed:

1 Like
3

@IggsTP hahah :joy: My exact reaction.
Check out the div class name on the HTML.

1 Like
4

“dank-ass-loader”

Best class name ever? :joy:

If it was just HTML, I would say the code widget, but I think this might need some hand on code time (I tend to stay away from coding unless necessary, to much time consuming) :stuck_out_tongue_winking_eye:

@samliew might know something

2 Likes
5

Wins First Place In My Book hahah!

I’m just starting my first few legit courses of Javascript. Although, code can be frustrating as hell, it’s even more frustrating being limited in ways I won’t be once I’m a ninja :wink:

I think it’s pretty simple just the HTML and CSS, I don’t see any JS.
So… I would think it just needs the right tags and integration and it’ll be good to go.

6

Most easy way would be to integrate a embed-obj from your widgets

Then add the html code from the github page:

into the embed object

second.PNG799Ă—632 53.6 KB

After that just copy this css code to the custom code area of your website

<style type="text/css">
main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #090707;
}

.dank-ass-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dank-ass-loader .row {
  display: flex;
}

.arrow {
  width: 0;
  height: 0;
  margin: 0 -6px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 21.6px solid #fd7000;
  animation: blink 1s infinite;
  filter: drop-shadow(0 0 18px #fd7000);
}
.arrow.down {
  transform: rotate(180deg);
}
.arrow.outer-1 {
  animation-delay: -0.05556s;
}
.arrow.outer-2 {
  animation-delay: -0.11111s;
}
.arrow.outer-3 {
  animation-delay: -0.16667s;
}
.arrow.outer-4 {
  animation-delay: -0.22222s;
}
.arrow.outer-5 {
  animation-delay: -0.27778s;
}
.arrow.outer-6 {
  animation-delay: -0.33333s;
}
.arrow.outer-7 {
  animation-delay: -0.38889s;
}
.arrow.outer-8 {
  animation-delay: -0.44444s;
}
.arrow.outer-9 {
  animation-delay: -0.5s;
}
.arrow.outer-10 {
  animation-delay: -0.55556s;
}
.arrow.outer-11 {
  animation-delay: -0.61111s;
}
.arrow.outer-12 {
  animation-delay: -0.66667s;
}
.arrow.outer-13 {
  animation-delay: -0.72222s;
}
.arrow.outer-14 {
  animation-delay: -0.77778s;
}
.arrow.outer-15 {
  animation-delay: -0.83333s;
}
.arrow.outer-16 {
  animation-delay: -0.88889s;
}
.arrow.outer-17 {
  animation-delay: -0.94444s;
}
.arrow.outer-18 {
  animation-delay: -1s;
}
.arrow.inner-1 {
  animation-delay: -0.16667s;
}
.arrow.inner-2 {
  animation-delay: -0.33333s;
}
.arrow.inner-3 {
  animation-delay: -0.5s;
}
.arrow.inner-4 {
  animation-delay: -0.66667s;
}
.arrow.inner-5 {
  animation-delay: -0.83333s;
}
.arrow.inner-6 {
  animation-delay: -1s;
}

@keyframes blink {
  0% {
    opacity: 0.1;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}

</style>

third.PNG630Ă—579 29.2 KB

2 Likes
7

After that adjust the css styling to your wishes…

Alternatively you could recreate the whole structure of the html within your designer …but…

1 Like
8

So simple thanks for the play by play, that really helped! THANK YOU.

9

http://svz-design-official-website.webflow.io/ Check it out!

1 Like
10

Damn that looks fine :scream:

The whole website actually… I always loved simple things… but it does look good :smiley:

1 Like
11

Love the preloader and nice site but in my opinion it would be better integrated if you would reuse the shapes and display them in some way within your website design…so that d make more sense i think

2 Likes
12

Thanks for the feedback Daniel!
I might redesign the cloud section to incorporate some geometric shapes or patterns.

13

Thanks @IggsTP !!

I’ll keep working on it after I publish. I for sure want to give it a more simple feel in some ways. I do love simplicity.
I wanted to do that background concept and use the Particles to give the idea of a connection of people for a while. So I am glad I got to do that.

1 Like
14

And you did well, it looks great :slight_smile:
I love the effect, it’s just too bad it doesn’t work when you hover the text :L

1 Like
15

Yeah! So true, it’s kind of abrupt when it stops working. I am wondering if there is a work around for that… so far I haven’t been able to do it. Thanks so much for the feedback man!

1 Like
16

oo I fixed it around the button. Now just the header is left … hmmm

17

Actually… It doesn’t do anything now :hushed:
I hover around and over the text, and nothing happens :confused:

1 Like
18

Oh my bad I was republishing and the overlay got left “ON” block instead of Display: None

19

There you go :slight_smile:
Looking good!

When are you going to share your secrets and teach us how to do that hover effect? :smirk:

20

how’d you do the animation on your page ?