wave rely on spaces between rects elements

[jjlorenzo]

If the html gets minified, the wave space is missing.

works

<div class="sk-wave">
    <div class="sk-rect sk-rect1"></div>
    <div class="sk-rect sk-rect2"></div>
    <div class="sk-rect sk-rect3"></div>
    <div class="sk-rect sk-rect4"></div>
    <div class="sk-rect sk-rect5"></div>
  </div>

does not work

<div class="sk-wave"><div class="sk-rect sk-rect1"></div><div class="sk-rect sk-rect2"></div><div class="sk-rect sk-rect3"></div><div class="sk-rect sk-rect4"></div><div class="sk-rect sk-rect5"></div></div>

[Julian Kimmig]

You may have a look at this jsfiddle i made...
https://jsfiddle.net/wpcsbsma/
It describes the reason and the fix for this issue.

In short answer: Change the font-size of sk-wave to 0 and add the space between the bars with a margin of 1px or any other size you prefer.

.sk-font-size-fix {
  font-size: 0;
  .sk-rect {
    margin: 0 1px;
  }
}

<div class="sk-wave sk-font-size-fix"><div class="sk-rect sk-rect1"></div><div class="sk-rect sk-rect2"></div><div class="sk-rect sk-rect3"></div><div class="sk-rect sk-rect4"></div><div class="sk-rect sk-rect5"></div></div>

[jjlorenzo]

Thanks!

I've read (but I don't remember where and I can't test right now) that in android browsers using font-size:0 doesn't work.

My current fix is using float: left

.sk-wave .sk-rect {
  float: left;
  margin-right: 1px;
}

Do you see any issue with my approach?

[Julian Kimmig]

i added a version of your approach in the jsfiddle.
https://jsfiddle.net/wpcsbsma/1/

no, this seems to be also a solution.
and if you're right and there are problems with 0-font-size on android, your fix might be safer than the other approach.

thanks for sharing your current fix 👍