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?

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?

• javascript
• microsoft-metro
• winjs

2 Answers 2

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;
}

use the same width and height for the

progress

For example

<progress style="width:50px;height:50px;">

element, you will get that effect.