带有复选标记的圆形装载器 - 如何添加X故障状态

Question

我如何使用X而不是勾选添加失败状态？我真的不知道如何生成滴答声。

jquery和html只是实际生成tick而没有问题，以及如何更改它以显示X.

<div class="circle-loader">
      <div class="checkmark draw"></div>
</div>

<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>

    body {
    padding: 5em;
    text-align: center;
}

h1 {
    margin-bottom: 1em;
}

// Define vars we'll be using
$brand-success: #5cb85c;
$loader-size: 8em;
$check-height: $loader-size/2;
$check-width: $check-height/2;
$check-left: ($loader-size/6 + $loader-size/12);
$check-thickness: 2px;
$check-color: $brand-success;

.circle-loader {
      margin: 0 0 30px 10px;
      border: $check-thickness solid rgba(0, 0, 0, 0.2);
      border-left-color: $check-color;
      animation-name: loader-spin;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      position: relative;
      display: inline-block;
      vertical-align: top;
}

.circle-loader,
.circle-loader:after {
     border-radius: 50%;
     width: $loader-size;
     height: $loader-size;
}

.load-complete {
     -webkit-animation: none;
      animation: none;
      border-color: $check-color;
      transition: border 500ms ease-out;
 }

 $('#toggle').click(function() {
       $('.circle-loader').toggleClass('load-complete');
       $('.checkmark').toggle();
 });

https://codepen.io/scottloway/pen/zqoLyQ