如何提高加载动画类型？

Question

我正在制作加载动画，现在下面是加载动画圆圈类型：

var waitingMask = {
  show: function() {
    var body = $('body');
    var static_pos;
    var spinner = body.children('.spinner');
    if (spinner.length && !spinner.hasClass('spinner-remove')) return null;
    !spinner.length && (spinner = $('<div class="spinner' + (static_pos ? '' : ' spinner-absolute') + '"/>').appendTo(body));

    animateSpinner(spinner, 'add');
    body.addClass("spinner-fade");
  },

  hide: function() {
    var body = $('body');
    var complete;
    var spinner = body.children('.spinner');
    spinner.length && animateSpinner(spinner, 'remove', complete);
    body.removeClass("spinner-fade");
  }


}

function animateSpinner(el, animation, complete) {
  if (el.data('animating')) {
    el.removeClass(el.data('animating')).data('animating', null);
    el.data('animationTimeout') && clearTimeout(el.data('animationTimeout'));
  }
  el.addClass('spinner-' + animation).data('animating', 'spinner-' + animation);
  el.data('animationTimeout', setTimeout(function() {
    animation == 'remove' && el.remove();
    complete && complete();
  }, parseFloat(el.css('animation-duration')) * 1000));
}

function showLoading() {
  return waitingMask.show();
}

function hideLoading() {
  return waitingMask.hide();
}

/* The spinner */

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.spinner,
.spinner:before {
  width: 80px;
  height: 80px;
  box-sizing: border-box;
}

.spinner:before {
  content: '';
  display: block;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}

.spinner-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
}


/* Animations */

.spinner-add,
.spinner-remove {
  animation-fill-mode: both;
  animation-duration: .4s;
}

.spinner-add {
  animation-name: spinner-add;
}

@keyframes spinner-add {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.spinner-remove {
  animation-name: spinner-remove;
}

@keyframes spinner-remove {
  to {
    transform: scale(0);
  }
}

.spinner-fade {
  content: '';
  display: block;
  /* position: fixed; */
  top: 0;
  /* bottom: 0; */
  left: 0;
  /* right: 0; */
  width: 100%;
  height: 100%;
  background-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  ABC
</h1>
<button onclick="showLoading()">Add Spinner</button>
<button onclick="hideLoading()">Remove Spinner</button>

jsfiddle

但是我想将我的圆形加载更改为浮动栏加载，如下所示：

任何人都可以给我解决我的问题的方法吗？ 谢谢。