Material Design Loading Animation

[dominicap]

This is probably gonna be the most difficult part of making this theme. I don't know if it'd possible but we should to implement a Material Design Loading Animation for when the cursor the system is busy.

2 Features I would suggest

• Change color based on user selected MD color theme in Papyrus Settings
• Only show this if the system is loading for more than 5 - 10 seconds. In other words don't show the loading cursor for opening files and applications. (Sort of like the Mac rainbow load animation , it rarely shows up.)

If it isn't possible to implement this I suggest not having a loading cursor at all. :)

[danielhickman]

Only show this if the system is loading for more than 5 - 10 seconds. In other words don't show the loading cursor for opening files and applications. (Sort of like the Mac rainbow load animation , it rarely shows up.)

The loading cursors are either loading in background and busy in Windows and I'm fairly certain that OSX does it in a similar way, which is based on load and where it's loading rather than time. I've seen both types of the loading cursors and UX wise, you should always have an indicator so the user can determine what's happening and what's going unresponsive.

I really like the idea of using the preloader though :D

[crutchcorn]

I'm not so sure that we can do Change color based on user selected MD color theme in Papyrus Settings unless we make a different icon theme for every color... Then it would have to be adopted by @ibeliever. If he's willing to take on such a massive role, then so are we and I'll start working on that right away. That is of course, if we'd even be used by Papyros AT ALL. ;P

[dominicap]

Okay, so I have made a better GIF using the Material QML demo for the material loading animation. Now I need a little help getting rid of the unnecessary repeated frames and making it transparent. The Link is below:
https://drive.google.com/file/d/0B6lnLaWnxNupbERUdmhSSDJwOHM/view?usp=sharing

[iBelieve]

What about using a white background circle with a shadow behind the progress spinner, similar to this:

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsRWlsOUFOeG96RnM/components-progressactivity-behavior_Loading_SwipeDown_noload_xhdpi_005.webm

I think having the background would help to make the progress spinner easier to see on a dark background.

[danielhickman]

I kinda like Michael's idea. Also I may be able to get 100% accurate gifs, mp4s, and png series from the sticker sheet for After Effects.

[dominicap]

I agree with @ibeliever as well.@danielhickman That would be awesome if you could make those accurate gifs!

[dominicap]

@danielhickman Can you tell me how to make those GIFS from the sticker sheets and where i can find the sticker sheets? I have some time and want to take a shot at it!

[danielhickman]

Here is the AE sticker sheets from Google:
https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3YnRCN3B2eW05SjA/stickersheet_general_aep.zip

Use Adobe Media Encoder to export to GIF, make sure the aspect ratio of the
pixels is 1:1.

On Sun, Sep 6, 2015 at 3:11 PM Dominic Philip [email protected]
wrote:

@danielhickman https://github.com/danielhickman Can you tell me how to
make those GIFS from the sticker sheets and where i can find the sticker
sheets? I have some time and want to take a shot at it!

—
Reply to this email directly or view it on GitHub
#6 (comment)
.

[dominicap]

@danielhickman Thanks!

[dominicap]

For the loading animation, I suggest a rainbow colored one like in g+ with the white circle background