Friday, August 07, 2015

Creating an Xbox One style loading indicator



If you've started an XBox One you'll have seen the loading screen where the three white circles pulsate below the logo while the console starts up.

Watching this the other day I thought I'd have a go at recreating such an animation. (I've been looking at a lot of loading indicators recently and thinking about different ways of displaying a waiting state.)

After fiddling around in Blend for a bit (I decided to just do it all in Blend for a change) I came up with this: https://github.com/mrlacey/XboxStyleLoadingIndicator

It's a (Windows 8 style) Universal project but the UserControl in the Shared project will also work with Windows 10 (and probably WPF & Silverlight too).

It's quite simple.
It has `Foreground` and `Background` Brush properties, that are set to White and Green by default.
It has an `IsEnabled` property that you can bind to if you're so inclined.
It has `Start()`and `Stop()` methods, and if you can't work out what they do then you're probably in the wrong place.

Here's the interesting bit:
I don't like it when animations stop abruptly part way through or when loading indicators flash up on the screen for only a split second. Some people use a timer for preventing very brief display (e.g. the indicator must be shown for at least N seconds before being hidden) but that doesn't prevent it disappearing part way through the animation. To address this I made the control so that it will always complete the animation it is doing before stopping. This means that calling `Stop()` or setting `IsEnabled` to false won't immediately make the animation go away. If that's what you want then change `Visibility` or hide or remove it in some other way. ;)


There are a couple of known issues:
- You have to specify a background colour that matches the background of whatever it is displayed on top of. This means it might look odd if not on a solid colour background.
- It doesn't scale well. But you could easily modify the code in the UserControl if you wanted something bigger.

Both of these issues could be addressed by switching to using a Path, rather than the Ellipses I'm using at the moment. It might be something I get round to eventually, But if you'd really like to see it sooner then let me know.


Thoughts? Interest? Feedback?


5 comments:

  1. ChloeTim8:22 pm

    Buying an Xbox 1 is a way of good idea. because a console itself is awesome thing. elo boosting

    ReplyDelete
  2. Anonymous2:28 pm

    I've search for creating an Xbox One style loading indicator so long. I really want to see it. сustom essay

    ReplyDelete

  3. I love your website. I wanted to appreciate it for this good read!! I definitely enjoying each little bit with the article and I've you bookmarked your site to check out new stuff an individual post.
    2016 Jeep Wrangler
    2016 Mazda CX 5
    Chevrolet Cruze 2016
    Hyundai Accent 2016

    ReplyDelete