Question

我是CSS的100％新手，并且一直在尝试修改角度加载条模块中的现有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/

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

1 个答案: