Модификация CSS для более привлекательного загружаемого spinner

Question

Я новичок на 100% в CSS и пытаюсь изменить существующий 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/