如何使用 Javascript 手动显示 Windows 8 Metro 加载轮/加载点答案

【问题标题】：How to manually show Windows 8 Metro loading wheel / loading dots using Javascript如何使用 Javascript 手动显示 Windows 8 Metro 加载轮/加载点
【发布时间】：2012-07-12 10:27:52
【问题描述】：

在 ListViews 或类似上使用数据源时，会出现 Windows 8 加载轮。这很好，但我仍然想在我选择的容器中手动启动和停止这个装载轮。我也想知道如何使用加载点。我怎样才能做到这一点？

【问题讨论】：

标签： javascript microsoft-metro winjs

【解决方案1】：

感谢 Jevar 的建议，我设法找到了 Quickstart 添加进度控件的指南。我想要的确实是一个 ProgressRing，更特别是一个不确定的进度环。这是在 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;
}

【讨论】：

【解决方案2】：

使用相同的宽度和高度

进展

例如

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

元素，你会得到那个效果。

【讨论】：