Индикатор выполнения

Для визуального отображения выполнения процесса используется индикатор выполнения.

Индикатор удобно применять для длительных операций — заполняющаяся область индикатора (полоса прогресса выполнения) и меняющееся значение счетчика информируют пользователя, что процесс не "завис", и показывают, сколько времени осталось до завершения процесса.

Документация API Спецификация Axure

Базовый индикатор выполнения процесса

Базовый индикатор выполнения процесса реализован в классе Controls/progress:Bar. Отображает полосу прогресса выполнения, значение которой (в процентах) определяется опцией value.

<!-- WML -->
<Controls.progress:Bar
   name="ProgressBar"
   value="{{80}}"/>

Стандартная раскладка индикатора

Стандартная раскладка индикатора реализована в классе Layout/progress:Default. Содержит полосу прогресса выполнения, и под полосой: текст слева, текст справа, процент выполнения.

Заполненность полосы прогресса, а также процент выполнения (отображается под полосой) определяются опцией value.

Значение текста слева и справа от полосы прогресса определяются, соответственно, опциями infoLeft и infoRight.

<!-- WML -->
<div>
   <Layout.progress:Default value="{{ _value }}">
      <ws:infoLeft>infoLeft</ws:infoLeft>
      <ws:infoRight>infoRight</ws:infoRight>
   </Layout.progress:Default>
    
   <Controls.input:Number bind:value="_value" precision="{{ 0 }}" />
</div>

Компактная раскладка индикатора

Компактная раскладка индикатора реализована в классе Layout/progress:Compact. Отличается от стандартной отсутствием текста слева от полосы прогресса. Вместо текста слева отображается процент выполнения.

Соответственно, отображение компактного индикатора определяется опциями value и infoRight.

<!-- WML -->
<div>
   <Layout.progress:Compact value="{{ _value }}">
      <ws:infoRight>infoRight</ws:infoRight>
   </Layout.progress:Compact>
    
   <Controls.input:Number bind:value="_value" precision="{{ 0 }}" />
</div>