Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use SVG for preloader

See original GitHub issue

No but seriously to have the tipical preloader of Material Design you :

    <div class="preloader-wrapper big active">
      <div class="spinner-layer spinner-blue">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-red">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-yellow">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-green">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>
    </div>

Official web framework of Google (MDL) just offers one line to have the preloader not 40. Animate it with JS or CSS 3 animations or something, I don’t know what but this is not serious …

Issue Analytics

State:
Created 7 years ago
Reactions:7
Comments:9 (3 by maintainers)

Top GitHub Comments

3reactions

Thanoodcommented, Nov 8, 2016

MDL does basically the same thing but uses javascript. Less code is, in this case, just a matter of perception. The Materialize spinner can at least be shown before any JS is loaded.

Here is one with SVG and CSS (not from me): https://codepen.io/mrrocks/pen/EiplA

But I’m not sure about browser compatibility in this case. Materialize spinner is at least compatible with anything out there, afaik. That’s fine IMO. 😃

BUT: I’ve also brought it down to <md-progress type="circular"></md-progress> in the framework I use. 😄

2reactions

Dogfalocommented, Dec 23, 2016

I can sympathize with the HTML markup being too long, however we are already using CSS to animate it and using JS to animate it would be worse.

The SVG route might be a god fix for this. However the Codepen @Thanood provided seems to have an animation bug. If anyone is willing to take a look and can fix this, we can hopefully get a change in one of the next few versions.