css - 如何改变圆形边框的长度

Question

我正在尝试为我正在处理的网站制作一个级别指示器。我希望它显示某人离下一级别有多近或多远，即在一个漂亮的圆形图形中显示他们的点数/xp。到目前为止，这就是我所拥有的，但我似乎无法更改加载器/边框的长度。

我到处找，一无所获。有人有什么想法吗？

谢谢

.loader 
{
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: putAtStart .001s forwards;
}

@keyframes putAtStart 
{
    100% { transform: rotate(45deg); }
}

Answer 1

我认为使用“边界半径解决方案”仅更改一个值是不可能的。要使栏更长，您需要使用另一个边框来覆盖它等等。

您可以做的是将其拆分为每个季度的 4 个 CSS 类，并将它们相应地应用到当前级别。要达到水平指示器的任何值(而不仅仅是每 25%)，您需要将 loader div 分成 4 个，每个负责四分之一。最后一个 div 需要有自定义的转换值(例如 transform: rotate(15deg);)。但是需要更多代码(JS)。最大的问题是实现前 25%，因为旋转不会改变长度。

.loader 
{
border: 16px solid #f3f3f3; /* Light grey */
border-radius: 50%;
width: 120px;
height: 120px;
}

.loader25
{
border-top: 16px solid #3498db; /* Blue */
animation: putAtStart 0.001s forwards;
}

.loader50 {
border-right: 16px solid #3498db; /* Blue */
animation: putAtStart 0.001s forwards;
}

.loader75 {
border-bottom: 16px solid #3498db; /* Blue */
animation: putAtStart 0.001s forwards;
}

@keyframes putAtStart {
100% { transform: rotate(45deg); }
}

<div class="loader loader25 loader50 loader75">test</div>

编辑:

这里您有一个我在开头提到的 JS 解决方案。移动 slider 并查看平滑的进度(单击 slider 并使用箭头向右/向左移动):

function progress() {
  var inputValue = $('input').val();

  var fixed = $('.loader-fixed');
  fixed.removeClass('loaded25');
  fixed.removeClass('loaded50');
  fixed.removeClass('loaded75');
  fixed.removeClass('loaded100');

  var rest = $('.loader-rest');
  rest.css('transform', 'rotate(' + (((inputValue * 360 ) / 100) - 45) + 'deg)');
  
  var cover = $('.loader-cover');

  if(inputValue >= 25) {
    cover.css('display', 'none');
    fixed.addClass('loaded25');
    if(inputValue >= 50) {
      fixed.addClass('loaded50');
      if(inputValue >= 75) {
        fixed.addClass('loaded75');
        if(inputValue >= 100) {
          /*
            This line be removed due to loader-rest 
            covers last quarter.
          */
          fixed.addClass('loaded100');
        }
      }
    }
  } else {
    cover.css('display', 'block');
  }

}

progress();

.loader {
  position: relative;
}

.loader-rest {
  border: 16px solid transparent; /* Light grey */
  border-top: 16px solid #3498db; /* Light grey */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.loader-fixed {
  border: 16px solid #f3f3f3; /* Light grey */
  border-radius: 50%;
  transform: rotate(45deg);
  width: 120px;
  height: 120px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.loader-cover {
  border: 16px solid transparent; /* Light grey */
  border-top: 16px solid #f3f3f3; /* Light grey */
  border-radius: 50%;
  transform: rotate(-45deg);
  width: 120px;
  height: 120px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.loaded25 {
  border-top: 16px solid #3498db; /* Blue */
}

.loaded50 {
  border-top: 16px solid #3498db; /* Blue */
  border-right: 16px solid #3498db; /* Blue */
}

.loaded75 {
  border-top: 16px solid #3498db; /* Blue */
  border-right: 16px solid #3498db; /* Blue */
  border-bottom: 16px solid #3498db; /* Blue */
}

/* This class can be removed. Check my comment in JS section */
.loaded100 {
  border-top: 16px solid #3498db; /* Blue */
  border-right: 16px solid #3498db; /* Blue */
  border-bottom: 16px solid #3498db; /* Blue */
  border-left: 16px solid #3498db; /* Blue */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" onchange="progress()">
<div class="loader">
<!-- fixed is used for full quarters -->
<div class="loader-fixed"></div>

<!-- rest covers values between 0-25-50-75-100 -->
<div class="loader-rest"></div>

<!-- cover is used only when value is less than 25% so it hides part of the border -->
<div class="loader-cover"></div>

</div>