Блог

Возможно ли иметь радиус границы для progressbarjs, который заполнен на 50% точно так же, как радиус границы родительского divs?

HTML

 <div class="pgbar" id="pgbar"></div>
 

CSS

   .pgbar {
    height: 46px;
    margin: 0 auto 30px;
    background-color: #D8D8D8;
    border-radius: 23px;
    padding: 2px;
    svg {
      height: 100%;
      width: 100%;
      border-radius: 23px;
    }
  }
 

JS

 var bar = new ProgressBar.Line(pgbar, {
    color: '#00AFD0',
    trailWidth: 1,
    svgStyle: {borderRadius: '23px'}
});

bar.animate(0.5);
 

border-radius Не работает на переднем / правом краю загружаемого SVG, потому что SVG имеет ширину 100%, поэтому радиус границы фактически находится на крайних левых / правых краях SVG и, следовательно, не будет обрезать путь, если ширина пути не равна 100%.

Чтобы исправить это, вы можете использовать комбинацию stroke-linecap: round для округления края обводки <path> элемента и задать ширину обводки элемента programmatically. Исходя из документации, собственный размер SVG всегда 100×strokeWidth равен, поэтому вам нужно будет масштабировать холст по соотношению сторон элемента DOM для достижения округлой формы.

 var width = pgbar.clientWidth;
var height = pgbar.clientHeight;

var bar = new ProgressBar.Line(pgbar, {
  color: '#00AFD0',
  strokeWidth: height / width * 100,
  svgStyle: {
    strokeLinecap: 'round'
  }
});

bar.animate(0.5); 

 .pgbar {
  height: 46px;
  margin: 0 auto 30px;
  background-color: #D8D8D8;
  border-radius: 23px;
  padding: 2px;
}

.pgbar svg {
  height: 100%;
  width: 100%;
  border-radius: 23px;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script>
<div class="pgbar" id="pgbar"></div> 

Предостережение: если ширина элемента индикатора выполнения изменяется, что приводит к изменению его соотношения сторон, вам нужно будет найти способ изменить strokeWidth : не уверен, что API плагина действительно поддерживает это. Если вам нужно обеспечить такую гибкость, возможно, вам лучше просто написать свой собственный простой компонент для обработки анимации панели прогресса: помните, что этот <progress> элемент довольно хорошо поддерживается.