Materialdesign: Loading Icon

[krambertech]

Hi!

I lack of loading icon. Something to add spinning animation and create quick and simple loader, for example, inside button or input.

I've already created an svg. Here you can find it: https://drive.google.com/drive/folders/0B5grXaOjT059Wld6U2xEbUJ1ODA?usp=sharing

Examples of use:

Thank you!

[Templarian]

Keeping this opened until I have the SCSS updates in for mdi-spin.

[Templarian]

Done mdi-spin will be in the next release. It works like font awesome.

[krambertech]

Cool! Thanks!

[JamesCoyle]

For anyone that finds it useful, a spinner is really easy to make with pure CSS. https://jsfiddle.net/41w39g95/

[PeterShaggyNoble]

And, just to add to the collection, here's a Material-style SVG: https://jsfiddle.net/petershaggynoble/jk9eejaa/

[Templarian]

Yep, these are probably the recommended way, but these loader spin should work as a quick replacement for those coming from font awesome. 😸

[krambertech]

Actually I find it useful when using to replace icons in the text field or button. As quick inline loading indication

Very nice to use with React like this:

const searchTextField = (
  <TextField
    leftIcon={loading ? <Icon spinning type="loading" /> : <Icon type="search" />}
    placeholder="Search..."
    value={search}
    onChange={this.handleSearch}
  />
);

Of course, for page (or section) loader there are much better options :)

[MrGrigri]

Just as a mention, the only issue with @PeterShaggyNoble solution is that the is no support for IE animations on SVG elements. Support discussed here: http://caniuse.com/#feat=svg-smil

[PeterShaggyNoble]

If that were the worst thing IE was guilty of, I'd be a very happy man!

[md5]

Done mdi-spin will be in the next release. It works like font awesome.

@Templarian Which commit was it added in? I can't seem to find it.

[Templarian]

@md5 It was added to the build tools, it will be visible in the next release in the dist repo here. Please track #1891 for the release of v1.9.xx.

[kospl]

Great icon, thanks!