Materialize: Use SVG for preloader

[NitroBAY]

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 ...

[sagg629]

In our company I've created an angular directive to render the preloader in just one line, parametrizable to show small, normal and big preloader.

app.directive('preloader', function () {
    return {
        restrict: 'E',
        templateUrl: 'js/partials/preloader.html',
        scope: true,
        replace: true,
        link: function (scope, elem, attrs) {
            scope.tAttrs = attrs;
        }
    }
});

In templateUrl property specify URL containing preloader's markup.
If you want to specify preloader size, can follow this approach:
<div class=" preloader-wrapper {{tAttrs.size}} active"> ... </div>

And call this wherever you want:
<preloader size="normal"></preloader>

Sometimes we need to make things simple.
Hope this helps (Y)

[NitroBAY]

This is great and could help other if Materialize isn't updated in the right way soon. As for me I use an other template engine and I taught of using a kind of template/wrapper/directive but in any way, especially for those who don't use templating engin, 40 lines is too much, don't you think so ?

[sagg629]

Yeah @NitroBAY you're right. Too much code to get this simple rotating-circle. I think the reason to have many lines is to allow programmer to customize (??) preloader :stuck_out_tongue:

Anyway, directive above is, for me, a nice workaround to show preloader by a simply manner.
I need to have a clean code, and I'm trying to get that using my knowledge and experience.

[Thanood]

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. 😄

[NitroBAY]

Hmml interesting. If this is a compatibility issue I could understand but I think Materialize is only compatible >= IE 10 (not sure)

[Dogfalo]

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.

[tomscholz]

@Dogfalo I can't spot any animation bugs. Can you try to be more specific? :)

[ahmedansari153]

@tomscholz If you look closely at the bottom of the circle, it shows a glitch when it goes through the animation. It is really hard to see because it is so fast. It is a dot of the color it is cycling through. Like the trail of the circle is lagging a little behind. It is very intermittent, so it make take a sec for it to show up on your screen.

[DanielRuf]

This was a rounding bug which is fixed in https://github.com/Dogfalo/materialize/pull/4444..