title: Modifying CSS for a nicer looking loading spinner
body: <p>I am a 100% newbie to CSS and have been trying to modify the existing CSS in angular-loading-bar module to have a nicer-looking loading spinner. So far, I have a square-shape spinner that spins in the center of the webpage, with a black top border and grey border on the left.</p>
  
  <p>It does not look the way I wanted. I would like a circle spinner, but can't figure out where I can modify to make it a circular shape. Could someone help?</p>
  
  <pre><code>#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); }
  }
  </code></pre>