Оформление элементов управления "Ход выполнения" (HTML)

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Узнайте, как применять каскадные таблицы стилей (CSS) и таблицы стилей библиотеки Windows для JavaScript для стилизации элементов управления progress.

Что необходимо знать

Технологии

Необходимые условия

Предполагается, что вы знаете, как создавать три различных типа элемента управления progress: определенный индикатор выполнения, неопределенный индикатор выполнения и неопределенный кольцевой индикатор выполнения. Сведения о добавлении различных типов элементов управления progress: Краткое руководство: добавление элементов управления "Ход выполнения".

Полезные свойства CSS

Эти свойства CSS особенно полезны при стилизации элемента управления progress:

width
Указывает ширину элемента управления "Ход выполнения". Ширина и высота кольцевого индикатора неопределенного состояния должны быть одинаковы.
height
Указывает высоту элемента управления "Ход выполнения". Ширина и высота кольцевого индикатора неопределенного состояния должны быть одинаковы.
color
Указывает цвет полосы определенного индикатора выполнения и цвет точек неопределенного и кольцевого индикаторов выполнения.

В этом примере создается полосной индикатор определенного состояния progress с голубым цветом полосы.
```
<progress value="0.4" style="color: blue"  />
```

Псевдоэлементы для стилизации элементов управления "Ход выполнения"

Элемент управления progress предоставляет эти псевдоэлементы, которые вы можете использовать как селекторы для стилизации определенных частей элемента управления.

::-ms-fill
Применяет один или несколько стилей к части элементов управления progress с определенным состоянием и задает анимацию элементов управления "Ход выполнения" с неопределенным состоянием.

Все стили применяются к части определенного индикатора выполнения, за исключением свойства стиля animation-name, которое управляет анимацией неопределенного прямого и кольцевого индикаторов выполнения.

В данном примере элемент управления progress отображается как неопределенный кольцевой индикатор выполнения.
```
/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }
```

(Дополнительные сведения о различных сочетаниях псевдоэлементов с другими селекторами см. в разделе Основные сведения о селекторах CSS).

Псевдоклассы для стилизации элементов управления "Ход выполнения"

Этот элемент поддерживает следующие псевдоклассы, которые можно использовать в качестве селекторов для стилизации элемента управления в определенных состояниях.

:indeterminate
Применяет один или несколько стилей к элементу управления progress в неопределенном состоянии.

В этом примере определяется стиль для элементов управления progress в неопределенном состоянии.
```
progress:indeterminate {
    /* styling here */
}
```

(Дополнительные сведения о различных сочетаниях псевдоклассов с другими селекторами см. в разделе Основные сведения о селекторах CSS).

Классы CSS в WinJS для задания стиля элементов управления progress

В WinJS предусмотрено несколько классов CSS для стилизации элемента управления progress.

Чтобы применить эти классы, задайте имя класса в качестве атрибута class элемента управления. Вы можете назначить несколько классов одному элементу, разделив имена классов пробелом. В данном примере к элементу управления progress применяются классы win-ring и win-large.

<progress class="win-ring win-large" />

В WinJS предусмотрены следующие классы CSS для стилизации элемента управления progress:

win-error
Приостанавливает определенный progress и отображает его в стиле ошибки.
win-large
Увеличивает элемент управления progress. Используйте этот стиль для операций в полноэкранном режиме.
win-medium
Назначает средний размер элементу управления progress. Используйте этот класс, если кольцевой индикатор выполнения отображается рядом с текстом размером 20 pt.
win-paused
Приостанавливает выполнение полосного индикатора определенного состояния progress.
win-ring
Отображает элемент управления progress в виде неопределенного кольцевого индикатора. Вы должны указать ширину и высоту элемента управления progress, задав свойства width и height или применив класс win-medium или win-large.

Связанные разделы

Краткое руководство: добавление элементов управления "Ход выполнения"

Руководство и контрольный список для элементов управления ходом выполнения

Основные сведения о селекторах CSS

Поделиться через