Skip to main content

Індикатор прогресу

Навігація

Індикатор прогресу

На додаток до пепереднього завантажувача (Preloader) Techno4 також поставляється з фантастичними анімованими визначеними та нескінченними/невизначеними індикаторами прогресу для вказівки активності

Визначений індикатор прогресу

Коли індикатор прогресу визначений, він указує, скільки часу триватиме операція, коли можна визначити відсоток завершення.

Подивімось на макет визначеної панелі прогресу:

<div class="progressbar" data-progress="20">
  <span></span>
</div>
Де data-progress="20" - поточний прогрес (у відсотках).

Зауважте, що цей атрибут даних встановлює прогрес лише під час завантаження сторінки. Якщо вам знадобиться змінити його пізніше, це слід зробити через API.

Нескінченний індикатор прогресу

Коли панель прогресу нескінченна/невизначена, вона просить користувача зачекати, поки щось закінчиться, коли нема потреби вказувати, скільки часу це займе.

Подивімось на макет нескінченної панелі прогресу:

<div class="progressbar-infinite"></div>

Кольори індикатора прогресу

Індикатор прогресу підтримує всі кольори за замовчуванням . Отже, щоб змінити його колір, просто додайте color-[color]клас до елемента прогресу.
<!-- Червоний progressbar -->
<div class="progressbar color-red" data-progress="20">
  <span></span>
</div>

<!-- Зелений progressbar -->
<div class="progressbar color-green" data-progress="50">
  <span></span>
</div>

<!-- Жовитий нескінченний  progressbar -->
<div class="progressbar-infinite color-yellow"></div>

<!-- багатоколірний нескінченний  progressbar -->
<div class="progressbar-infinite color-multi"></div>

API індикатора прогресу

Прогресбар постачається з API, який дозволяє вам контролювати прогрес прогресу, показувати та приховувати його. Давайте розглянемо властивості та методи відповідного застосунку:
Метод Опис
app.progressbar.set(el, progress, duration)
встановити прогрес для визначення прогрессмуги

el - string or HTMLElement. Елемент індикатора прогресу або елемент, що містить елемент індикатора прогресу. Якщо рядок - CSS селектор такого елемента..

progress - number. Прогрес у відсотках (від 0 до 100)

duration - number. Тривалість переходу анімації зміни прогресу (у мс)

Цей метод повертає HTMLElement панелі прогресу

app.progressbar.set(progress, duration)
установити прогрес для Визначення панелі прогресу, яка знаходиться під кореневим елементом застосунку.

progress - number. Прогрес у відсотках (від 0 до 100)

duration - number. Тривалість переходу анімації зміни прогресу (у мс)

Цей метод повертає HTMLElement панелі прогресу

app.progressbar.show(el, progress, color)
створити та показати або просто показати (якщо вже представлено) прогресбар.

el - string or HTMLElement. Контейнер елемента індикатора прогресу або елемент, що містить елемент індикатора прогресу. Якщо рядок - CSS селектор такого елемента. Опціанально

progress - number. Прогрес у відсотках (від 0 до 100). Додатково

color - string. Колір панелі прогресу, наприклад «білий», «червоний» тощо з доступних колірних тем . Додатково

Цей метод повертає HTMLElement панелі прогресу
Усі аргументи тут необов’язкові:

● Якщо ви опустите el аргумент, він шукатиме (або створюватиме) елемент прогресу в корені застосунку

● Якщо ви опустите progress, буде показано/створено нескінченну панель прогресу

● Якщо ви опустите всі аргументи, тоді буде показано/створено нескінченну панель прогресу під коренем Застосунку з кольором за замовчуванням

Метод Опис
app.progressbar.hide(el)
приховати панель прогресу

● el - string or HTMLElement. Контейнер елемента індикатора прогресу або елемент, що містить елемент індикатора прогресу. Якщо рядок - CSS селектор такого елемента. Якщо не вказано, такий елемент шукатиметься під кореневим елементом застосунку.

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  /*
  --t4-progressbar-progress-color: var(--t4-theme-color);
  */
}
.ios {
  --t4-progressbar-height: 4px;
  --t4-progressbar-border-radius: 4px;
  --t4-progressbar-bg-color: rgba(0, 0, 0, 0.3);
}
.ios .dark,
.ios.dark {
  --t4-progressbar-bg-color: rgba(255, 255, 255, 0.3);
}
.md {
  --t4-progressbar-height: 4px;
  --t4-progressbar-border-radius: 0px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-progressbar-bg-color: rgba(var(--t4-theme-color-rgb), 0.5);
}

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Progress Bar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>In addition to <a href="/preloader/">Preloader</a>, Techno4 also comes with fancy animated determinate and
          infinite/indeterminate progress bars to indicate some activity.</p>
      </div>
      <div class="block-title">Determinate Progress Bar</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>When progress bar is determinate it indicates how long an operation will take when the percentage complete is
          detectable.</p>
        <p>Inline determinate progress bar:</p>
        <div>
          <p><span data-progress="10" class="progressbar" id="demo-inline-progressbar"></span></p>
          <p class="segmented segmented-raised">
            <a class="button" @click=${()=> setInlineProgress(10)}>10%</a>
            <a class="button" @click=${()=> setInlineProgress(30)}>30%</a>
            <a class="button" @click=${()=> setInlineProgress(50)}>50%</a>
            <a class="button" @click=${()=> setInlineProgress(100)}>100%</a>
          </p>
        </div>
        <div>
          <p>Inline determinate load & hide:</p>
          <p id="demo-determinate-container"></p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showDeterminate(true)}>Start Loading</a>
          </p>
        </div>
        <div>
          <p>Overlay with determinate progress bar on top of the app:</p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showDeterminate(false)}>Start Loading</a>
          </p>
        </div>
      </div>
      <div class="block-title">Infinite Progress Bar</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>When progress bar is infinite/indeterminate it requests that the user wait while something finishes when it’s
          not necessary to indicate how long it will take.</p>
        <p>Inline infinite progress bar</p>
        <p>
          <span class="progressbar-infinite"></span>
        </p>
        <p>Multi-color infinite progress bar</p>
        <p>
          <span class="progressbar-infinite color-multi"></span>
        </p>
        <div>
          <p>Overlay with infinite progress bar on top of the app</p>
          <p id="demo-infinite-container"></p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showInfinite(false)}>Start Loading</a>
          </p>
        </div>
        <div>
          <p>Overlay with infinite multi-color progress bar on top of the app</p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showInfinite(true)}>Start Loading</a>
          </p>
        </div>
      </div>
      <div class="block-title">Colors</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios simple-list">
        <ul>
          <li>
            <div class="progressbar color-blue" data-progress="10"></div>
          </li>
          <li>
            <div class="progressbar color-red" data-progress="20"></div>
          </li>
          <li>
            <div class="progressbar color-pink" data-progress="30"></div>
          </li>
          <li>
            <div class="progressbar color-green" data-progress="80"></div>
          </li>
          <li>
            <div class="progressbar color-yellow" data-progress="90"></div>
          </li>
          <li>
            <div class="progressbar color-orange" data-progress="100"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $el, $onMounted, $onBeforeUnmount }) => {
    let determinateLoading = false;
    let infiniteLoading = false;
    const setInlineProgress = (value) => {
      $t4.progressbar.set('#demo-inline-progressbar', value);
    }
    const showDeterminate = (inline) => {
      if (determinateLoading) return;
      determinateLoading = true;
      var progressBarEl;
      if (inline) {
        progressBarEl = $t4.progressbar.show('#demo-determinate-container', 0);
      } else {
        progressBarEl = $t4.progressbar.show(0);
      }
      var progress = 0;
      function simulateLoading() {
        setTimeout(function () {
          var progressBefore = progress;
          progress += Math.random() * 20;
          $t4.progressbar.set(progressBarEl, progress);
          if (progressBefore < 100) {
            simulateLoading(); //keep "loading"
          }
          else {
            determinateLoading = false;
            $t4.progressbar.hide(progressBarEl); //hide
          }
        }, Math.random() * 200 + 200);
      }
      simulateLoading();
    }
    const showInfinite = (multiColor) => {
      if (infiniteLoading) return;
      infiniteLoading = true;
      if (multiColor) {
        $t4.progressbar.show('multi');
      } else {
        $t4.progressbar.show();
      }
      setTimeout(function () {
        infiniteLoading = false;
        $t4.progressbar.hide();
      }, 3000);
    }

    return $render;
  };
</script>

Techno4 Framework