Clartiy DesignSystem Как центрировать спиннер - PullRequest
Новая
       96

Clartiy DesignSystem Как центрировать спиннер

0 голосов
/ 02 мая 2020

Как я могу центрировать Spinner в середине страницы? 

<div class="content-area" *ngIf="!document">
  <div class="spinner">Loading...</div>
</div>

Я пробую несколько комбинаций всего класса css с центром в нем, но у меня не получилось.

1 Ответ

0 голосов
/ 04 мая 2020

Вы можете использовать flexbox. Добавьте класс в область содержимого, который реализует использование flexbox на своих дочерних элементах, а затем отцентрируйте элемент с помощью justify-content и align-items.

Вот разметка, на которую я ссылаюсь: 

<div class="content-container">
    <div class="content-area centered-content-area">
  <div class="spinner">Loading...</div>
    </div>
</div>

Вот css для центрирования счетчика: 

.centered-content-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

Вот блик стека к увидеть это работает: https://stackblitz.com/edit/clarity-v3-light-theme-hhfttg

...