如何改变圆形边框的长度

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

我不认为只使用＆＃34; border radius solution＆＃34;更改一个值是可能的。要使条形更长，您需要使用另一个边框来覆盖它等等。

您可以做的是将每个季度分成4个CSS类，并相应地应用到当前级别。 要获得任何级别指标值（而不仅仅是每25％），您需要将装载器div分成4个，每个负责四分之一。最后一个div需要具有转换的自定义值（例如transform：rotate（15deg）;）。但是需要更多的代码（JS）。最大的问题是实现前25％，因为旋转不会改变长度。

＆＃13;

＆＃13;

.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); }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改

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

＆＃13;

＆＃13;

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();

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我找到了一个好的，易于使用的解决方案。它是一个javascript文件，可以很好地轻松定制进度条。 https://progressbarjs.readthedocs.io/en/latest/