css - 修改 CSS 以获得更好看的加载微调器

Question

我是 100% 的 CSS 新手，一直在尝试修改 angular-loading-bar 模块中的现有 CSS 以获得更好看的加载微调器。到目前为止，我有一个在网页中央旋转的方形微调器，顶部边框为黑色，左侧为灰色边框。

它看起来不像我想要的那样。我想要一个圆形微调器，但不知道在哪里可以修改以使其成为圆形。有人可以帮忙吗？

#loading-bar-spinner {
  pointer-events: none;
  -webkit-pointer-events: none;
  -webkit-transition: 350ms linear all;
  -moz-transition: 350ms linear all;
  -o-transition: 350ms linear all;
  transition: 350ms linear all;
}

#loading-bar-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
}

#loading-bar-spinner .spinner-icon {
  width: 120px;
  height: 120px;

  border:  solid 4px transparent;
  border-top-color:  #000;
  border-left-color: #ccc;
  border-radius: 14px;

  -webkit-animation: loading-bar-spinner 400ms linear infinite;
  -moz-animation:    loading-bar-spinner 400ms linear infinite;
  -ms-animation:     loading-bar-spinner 400ms linear infinite;
  -o-animation:      loading-bar-spinner 400ms linear infinite;
  animation:         loading-bar-spinner 400ms linear infinite;
}

@-webkit-keyframes loading-bar-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes loading-bar-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes loading-bar-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes loading-bar-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading-bar-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

Answer 1

#loading-bar-spinner .spinner-icon {
    border-radius: 50%; /* Change to 50% from 14px; */
}

http://jsfiddle.net/q6u8p48y/