Как сделать значок загрузки

Я использую Semantic UI и пытаюсь создать анимированный значок, например, с помощью значка счетчика. https://semantic-ui.com/elements/icon.html#спиннеры

С font-awesome это довольно просто, как описано здесь: https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons*

Есть ли эквивалент fa-spin для семантического пользовательского интерфейса?

stackoverflow.com/help/on-topic и stackoverflow.com/help/как спросить

— 25.07.2019 22:28

css css-animations font-awesome semantic-ui

25.07.2019 17:00

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 669

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Существует класс с именем loader из коробки, но вы всегда можете использовать пользовательский CSS, как показано ниже, для своих целей.

.loading {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Loading styles */

.loading {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Additional styles for snippet */
.ui.container {
  margin-top: 1em;
}

<link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css" rel = "stylesheet" />
<link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" />
<link rel = "stylesheet" type = "text/css" href = "https://semantic-ui.com//stylesheets/docs.css">
<div class = "ui container">
  <div class = "ui raised segment">
    <div class = "ui doubling five column grid center aligned">

      <div class = "column"><i class = "circle notch icon huge loading"></i></div>
      <div class = "column"><i class = "cog icon huge loading"></i></div>
      <div class = "column"><i class = "compass icon huge loading"></i></div>
      <div class = "column"><i class = "compass outline icon huge loading"></i></div>
      <div class = "column"><i class = "crosshairs icon huge loading"></i></div>
      <div class = "column"><i class = "life ring icon huge loading"></i></div>
    </div>
  </div>

На самом деле, класс здания, кажется, "загружает", а не "загрузчик": github.com/Semantic-Org/Semantic-UI/blob/…

— 25.07.2019 23:58

Это совпадение!

— 26.07.2019 00:15

Это совпадение, что вы назвали свой класс css «загрузкой», но в моем случае семантический класс «загрузки» пользовательского интерфейса выполняет эту работу. Это решение, которое я буду использовать

— 26.07.2019 00:17

25.07.2019 19:53