Question

我在Angular项目中使用ngx-loading；但我想知道是否有一种方法可以使用自定义CSS动画，而不是软件包提供的选项；我知道我可以使用ngxLoadingAnimationTypes config选项使用多个动画。但是我想使用自己的自定义微调框：

body {
  margin: 0;
}

.loader-new {
  animation: spin 1.5s linear infinite;
  position: fixed;
  width: 120px;
  height: 120px;
  top: 40%;
  right: 50%;
  border: 2px solid #1f94ed;
  border-radius: 50%;
  z-index: 99999;
}

.loader-new:after {
  content: "";
  width: 85%;
  height: 85%;
  background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-5%, -5%);
}

.loader-new.moon {
  border-left: 0;
  border-top: 0;
}

.loader-new.moon:after {
  display: none;
}


/* Animation for loading Spinner*/

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="loader-new moon"></div>

我似乎找不到真正禁用它使用的默认动画的方法。即使设置template配置选项也不起作用，因为它只能将其插入动画本身的顶部。

我可以在ngx-Loading中使用自定义动画吗？

0 个答案: