How to manually show Windows 8 Metro loading wheel / loading dots using Javascript

Question

When using a datasource on ListViews or similar the Windows 8 loading wheel appears. This is fine, but I still want to start and stop this loading wheel manually in a container of my choice. I'd also like to know how to use the loading dots. How could I go about to achieve this?

Answer 1

Thanks to Jevar's suggestion I managed to find a Quickstart guide for adding progress controls. What I wanted was indeed a ProgressRing, more spesifically a indeterminate progress ring. Here is how it is done in HTML/JS

HTML:

<label class="progressRingText">
    <progress class="win-ring withText"></progress>Processing</label>

CSS

progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}