Can someone tell how is this done?

1

I ve found this pen Css loader-pulse
For HTML is used PUG and SCSS for css . It’s a nice effect but the code is really confusing. It looks like something quite advanced in terms of CSS and some math. Is anyone here that could help how is that effect done? How is that code working?

2

it’s easier to understand if you can see the output when it’s rendered.

I didn’t re-create this, I copied it from the output and put into a new pen. It’s more obvious once you see both.

3

From what I gather:

There are 25 divs on HTML. Each one has 5 variables with different values:
–k (for delay calculation on y animation on .peak),
–s (for padding calculation on .peak),
–a (for initial rotate and “a” animation on .peak:before),
–t (for animation-duration on .peak:before),
–dt: (for animation-delay on .peak:before).

There are also 2 variables with fixed values as base on .canv element:
–n (for y animation-delay calculation) and –f.
Strangely, I didn’t find the use for variable –f.

There is a pseudo element :before on body creating the color effect with background and it’s moving through animation.
It is translating 50% to the right repeatedly, enough to make it looks infinite.
But the colors were only visible on .canv element applying background, filter and mix-blend-mode appropriately.
It is combined with the white box-shadow and black background on each .peak:before, creating the effect as a whole.

That’s roughly it. If you take a closer look and research the properties, you will understand better.

Smart approach.
It requires good knowledge of CSS3 and a bit of experimentation.

4

What is that syntax tho <div class="peak" style="--k: 0; --s: 1.11; --a: -32deg; --t: 1.02s; --dt: -0.78s;"></div>
I’ve never seen style inside a div and do you know what does --k 0 , --a etc.and all that stuff represent? This syntax is super weird for HTML

5

Thanks for your reply. I will google for some properties in there.

6

The styles appear to be variables for use with css. It’s something I’ve never seen before, didn’t even think it was possible to do.

7

Ye I know you can inject variables with some engines but when I saw the compiled HTML I still saw that weird syntax and I was confused cause I never seen that in pure HTML .