Skip to main content

Попередній завантажувач

Навігація

Попередній завантажувач

У Techno4 є гарний індикатор попереднього завантаження. Попереднє завантаження створено за допомогою SVG і анімовано за допомогою CSS, тому його можна легко змінювати.

Макет попереднього завантажувача

Макет досить простий:
<div class="preloader"></div>
Цей макет працюватиме, якщо ви розмістите попередній завантажувач на сторінці перед її ініціалізацією. Якщо вам потрібно додати його сторінку пізніше або використовувати в власних макетах, скористайтеся повним макетом попереднього завантаження. Для кожної теми він різний:
Макет попереднього завантажувача теми iOS 
<div class="preloader">
  <span class="preloader-inner">
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
  </span>
</div>
Макет попереднього завантажувача теми MD 
<div class="preloader">
  <span class="preloader-inner">
    <svg viewBox="0 0 36 36">
      <circle cx="18" cy="18" r="16"></circle>
    </svg>
  </span>
</div>

Кольори попереднього завантажувача

Попередній завантажувач підтримує всі кольори за замовчуванням . Отже, щоб змінити його колір, просто додайте color-[color]клас до елемента попереднього завантаження. Тема MD також підтримує спеціальні color-multi кольори, щоб зробити попередній завантажувач різноколірним. 
<!-- Червоний preloader -->
<div class="preloader color-red"></div>

<!-- Зелений preloader -->
<div class="preloader color-green"></div>

<!-- Різнокольоровий preloader -->
<div class="preloader color-multi"></div>

Накладання попоредньго завантажувача / API

Також можна викликати спеціальне накладення(overlay) Preloader, яке корисно, якщо вам потрібно заблокувати дії користувача, поки щось не завантажиться. Цей вид попереднього завантажувача з’являтиметься перед додатком і блокуватиме будь-які дії користувача за ним.

Давайте розглянемо пов’язані методи роботи з накладанням Preloader:

МетодОпис
app.preloader.show(color)
показати накладення Preloader

● color - string. Колір попереднього завантажувача, один із кольорів за замовчуванням

app.preloader.hide()
приховати оверлей Preloader
app.preloader.showIn(el, color)
показати накладення Preloader у вказаному елементі

● el - HTMLElement or string (with CSS Selector). Елемент, до якого буде додано накладення попереднього завантажувача

● color - string.Колір попереднього завантажувача, один із кольорів за замовчуванням

app.preloader.hideIn(el)
приховати оверлей Preloader у вказаному елементі

● el - HTMLElement or string (with CSS Selector). Елемент, з якого слід видалити накладання попереднього завантажувача
Наприклад:
var app = new Techno4();

// Показати preloader перед запитом Ajax 
app.preloader.show();

// Виконати запит Ajax 
fetch('someurl.html').then(() => {
  // приховати preloader коли запит Ajax виконано
  app.preloader.hide();
});
Відкриття накладення Preloader також додасть with-modal-preloader клас до елемента.

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
  --t4-preloader-modal-padding: 8px;
  --t4-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
}
.ios {
  --t4-preloader-color: #6c6c6c;
  --t4-preloader-size: 20px;
  --t4-preloader-modal-preloader-size: 34px;
  --t4-preloader-modal-border-radius: 5px;
}
.md {
  --t4-preloader-color: #757575;
  --t4-preloader-size: 32px;
  --t4-preloader-modal-preloader-size: 32px;
  --t4-preloader-modal-border-radius: 4px;
}

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Preloader</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>How about an activity indicator? Techno4 has a nice one. The t4 Preloader is made with SVG and animated
          with CSS so it can be easily resized.</p>
      </div>
      <div class="block-title">Default</div>
      <div class="block block-strong-ios block-outline-ios demo-preloaders align-items-stretch text-align-center">
        <div class="grid grid-cols-4 grid-gap">
          <div>
            <div class="preloader"></div>
          </div>
          <div class="demo-black-col">
            <div class="preloader color-white"></div>
          </div>
          <div>
            <div class="preloader preloader-large"></div>
          </div>
          <div class="demo-black-col">
            <div class="preloader preloader-large color-white"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Color Preloaders</div>
      <div class="block block-strong-ios block-outline-ios text-align-center">
        <div class="grid grid-cols-4 grid-gap">
          <div>
            <div class="preloader text-color-red"></div>
          </div>
          <div>
            <div class="preloader text-color-green"></div>
          </div>
          <div>
            <div class="preloader text-color-orange"></div>
          </div>
          <div>
            <div class="preloader text-color-blue"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Multi-color</div>
      <div class="block block-strong-ios block-outline-ios text-align-center">
        <div class="preloader color-multi"></div>
      </div>
      <div class="block-title">Preloader Modals</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
        <p>
          <a class="button button-fill" @click=${openIndicator}>Open Small Indicator</a>
        </p>
        <p>With <b>app.dialog.preloader()</b> you can show dialog modal with preloader indicator.</p>
        <p>
          <a class="button button-fill" @click=${openDialog}>Open Dialog Preloader</a>
        </p>
        <p>With <b>app.dialog.preloader('My text...')</b> you can show dialog preloader modal with custom title.</p>
        <p>
          <a class="button button-fill" @click=${openCustomDialog}>Open Dialog Preloader</a>
        </p>
      </div>
    </div>
  </div>
</template>
<style>
  .preloader-large {
    width: 42px;
    height: 42px;
  }

  .demo-preloaders .grid>div {
    padding: 5px;
    line-height: 42px;
  }

  .demo-black-col {
    background: #000;
  }
</style>
<script>
  export default (props, { $t4 }) => {
    const openIndicator = () => {
      $t4.preloader.show();
      setTimeout(function () {
        $t4.preloader.hide();
      }, 2000);
    }
    const openDialog = () => {
      $t4.dialog.preloader();
      setTimeout(function () {
        $t4.dialog.close();
      }, 2000);
    }
    const openCustomDialog = () => {
      $t4.dialog.preloader('My text...');
      setTimeout(function () {
        $t4.dialog.close();
      }, 2000);
    }

    return $render;
  };
</script>

Techno4 Framework