如何使带有对号的Circle装载机在角度6中工作？

Question

我如何制作此代码笔：https://codepen.io/alimuzzaman/pen/LyoyPj以6号角工作？

这是我尝试过的方法，但是我永远无法获得选中标记或'X'来进行动画处理，仅画圈其自身即可更改颜色。

HTML：

<div class="circle-loader" [ngClass]="{'load-complete': success, 'load-error': failed}">
  <div class="checkmark" [ngClass]="{'draw': success, 'error': failed}"></div>
</div>

<p>
  <button type="button" (click)="toggleCheck()">Toggle Completed</button>
  <button type="button" (click)="toggleFail()">Toggle Error</button>
</p>

CSS：与链接完全相同

TS：

toggleCheck() {
    this.success = true;
    this.failed = false;
  }

  toggleFail() {
    this.failed = true;
    this.success = false;
  }