如何制作加载图标

Question

我正在使用语义 UI 并尝试创建一个动画图标，例如使用微调器图标。 https://semantic-ui.com/elements/icon.html#spinners

使用 font-awesome 非常简单，如下所述：https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons*

语义 UI 是否有 fa-spin 的等价物？

Answer 1

开箱即用的名为 loader 的 class，但您始终可以使用自定义 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>

如何制作加载图标

How to make a loading icon

css

css-animations

font-awesome

semantic-ui