角度中的自定义微调器（徽标）

Question

我想在Angular项目中创建自定义微调器/加载器。我已经搜索了所有内容，但是我只能找到创建不同微调器的帮助，甚至找不到使用图像的微调器。谁能帮助我或指出正确的方向？如果仅使用CSS和HTML，则在需要时不会加载。

Answer 1

这是我的代码示例，用于在Angular应用程序的较早项目中创建图像微调器（在纯CSS / HTML中完成：]

html：

<div *ngIf="loaderPersonInfo" class="spinner">
  <img class="spinner-img" src="../../../assets/img/logo.svg">
</div>

css：

.spinner-img {
  height: 20vh;
  width: 20vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: loading-spinner-img 3s linear infinite;
}


@keyframes loading-spinner-img {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateY(3600deg);
  }
}