Materialize: Optimize preloader HTML and styles

[ltodorov]

Expected Behavior

I had to implement your circular preloaders in one project and I found a lot of unneeded CSS rules that can be removed or replaced. Also I would like to align your HTML and styles to the latest Material design version: https://www.webcomponents.org/element/PolymerElements/paper-spinner

Current Behavior

HTML and CSS can be optimized by removing or replacing some rules.

Possible Solution

I will create a pull request but should I run the release command? I saw so many differences which are not related to my preloader changes and in this case what version number should I use? 0.100.2?

[Dogfalo]

No need to run the release command, please take a look at the CONTRIBUTING.md

[tomscholz]

Also see #3888

[ltodorov]

I saw it but I would need to recompile SCSS files. Is there another way to generate the materialize.css?

[tomscholz]

What do you mean? You can compile our scss with our grunt tasks

[ltodorov]

Okay, I'll try again. Thanks!

[ltodorov]

@tomscholz I'm not sure it'll fix the glitch that was described in #3888. I reduced the animation speed but I couldn't see any problem. Tomorrow I can test on different devices.

[ltodorov]

BTW I used grunt sass postcss userbanner --newver=0.100.1 to generate the CSS files. I don't know why all comments have been marked as changes.

[DanielRuf]

Please just run grunt sass_compile. Also we never push compiled files, they are ignored. To test locally take a look at the task names in the gruntfile.

[ltodorov]

I tested on the following devices and browsers:
macOS Sierra 10.12.6 - Safari and Chrome 60 OK
Windows 10 - Chrome 60, Internet Explorer 11, Edge, Firefox - some annoying shaking on IE 11 and Edge only. This effect is also visible on Polymer's page: https://www.webcomponents.org/element/PolymerElements/paper-spinner/v1.2.1
Windows 10 Mobile - Edge OK
iOS 10.3.3 - Safari OK
Android 6.0.1 - Chrome 58 OK

[ltodorov]

Has someone else checked the modified preloaders? I'm not sure if there is an issue or the animation is not enough smooth.
This is a link to demo: https://codepen.io/anon/pen/VzMBYj

[ltodorov]

@tomscholz I couldn't reduce the HTML for issue #3888. Animations are not smooth on pseudo elements in IE and Edge.

[tomscholz]

As you can see in this gif, there is a moment where the spinner hops back for a second.

[ltodorov]

Isn't this also reproducible with the current code? I didn't fix anything. I improved the code quality only.