如何更改圆形边框的长度(How to change the length of circular border)

如何更改圆形边框的长度(How to change the length of circular border)

我正在尝试为我正在处理的网站制作关卡指标。 我希望它能够显示某人到达下一个关卡有多远或近距离，即在一个不错的圆圈图形中显示他们的点/ 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); } }

I am trying to make a level indicator for a website that I'm working on. I want it to show how close or far someone is from getting to the next level, i.e. show their points/xp in a nice circle graphic. So far this is what I have, but I can't seem to change the length of the loader/border.

I have searched everywhere and come up with nothing. Anyone got any ideas?

Thanks

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

最满意答案

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

你可以做的是将每个季度分为4个CSS类并相应地应用到当前级别。 为了达到任何价值水平指标（而不仅仅是每25％），你需要将装载机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解决方案。 移动滑块并查看平滑进度（单击滑块并使用箭头将其向左/向右移动）： 
 
 
 
  
  
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> 
  
 
I found a good, easy to use solution. Its a javascript file that makes a nice and easily customizable progress bar. https://progressbarjs.readthedocs.io/en/latest/