(HTML5) How can I create the processing icon such as the one when we reboot Windows 8?


  • I think you mean the progress ring? Just use the <progress> element in HTML, but make sure to style it such that the height and width are the same, and don't set a min or max. The latter creates an "indeterminate" control (no set values), and the width/height is what indicates the ring style.

    To make it simple, WinJS (in ui-dark.css and ui-light.css) provides some style classes for this:

        <progress class="win-ring">  creates a default size (20x20px).
        <progress class="win-ring win-medium">  creates a medium size (40x40px).
        <progress class="win-ring win-large">  creates a large size (60x60px).

    If you don't set the width/height equal, you'll get a linear version of the progress control. If it's indeterminate you'll have the horizontally animated dots. If there's a min/max, then you get a solid bar set to the value property that should be between min and max.

    For docs, start with http://msdn.microsoft.com/en-us/library/windows/apps/hh465453.aspx#p_section.


    Tuesday, May 15, 2012 3:22 AM