Streaming live at 10am (PST)

How to embed this Beautiful Pre Loader

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

1 Like

That’s quite a beautiful loader :hushed:

1 Like

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

1 Like

“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

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.

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

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>

2 Likes

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

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

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

1 Like

Damn that looks fine :scream:

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

1 Like

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

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

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

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

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

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

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

1 Like

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

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:

how’d you do the animation on your page ?