New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use SVG for preloader #3888
Comments
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.
In And call this wherever you want: Sometimes we need to make things simple. |
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 ? |
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 😛 Anyway, directive above is, for me, a nice workaround to show preloader by a simply manner. |
MDL does basically the same thing but uses javascript. Less code is, in this case, just a matter of perception. Here is one with SVG and CSS (not from me): But I'm not sure about browser compatibility in this case. BUT: I've also brought it down to |
Hmml interesting. If this is a compatibility issue I could understand but I think Materialize is only compatible >= IE 10 (not sure) |
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. |
@Dogfalo I can't spot any animation bugs. Can you try to be more specific? :) |
@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. |
This was a rounding bug which is fixed in #4444.. |
No but seriously to have the tipical preloader of Material Design you :
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 ...
The text was updated successfully, but these errors were encountered: