矩形边框进度条

Question

我正在尝试找出如何在矩形周围实现进度条。假设我有一个大小为500x300的div，带有5px（黑色）边框。

我希望进度条从左上角开始，然后向右下角->底部->右下角->左下角->并返回起始点。

- vromanch

---

这可以通过两种方式完成。第一种是使用画布（可能是最好的，但需要更长时间），或者您可以使用4个绝对定位的div，并根据需要设置每个的宽度/高度。 - Blake A. Nichols

Answer 1

纯CSS：

使用多个线性渐变作为背景并适当定位可以用CSS实现此效果。具体操作如下：

• 为元素的每个边框创建4个细长的linear-gradient背景，边框的厚度确定了background-size。也就是说，如果边框厚度为5px，则产生上下边框的线性渐变将是100％ 5px（100％宽度5像素高）而产生左右边框的线性渐变将是5px 100％（3像素宽100％高）。
• 最初，将background-position设置为使四条边都不可见。在动画期间，我们将每个背景渐变动画到其正确的位置。这样就产生了具有动画边框的效果。

在下面的代码段中，我使用了CSS关键帧，因此它会自动从开始到结束进行动画（即仅在完整的边框绘制后才停止），但如果您希望对此具有更多控制（例如在进度条中停止），则可以使用JS并根据进度百分比修改background-position。

.progress {
  height: 300px;
  width: 500px;
  background: linear-gradient(to right, black 99.99%, transparent), linear-gradient(to bottom, black 99.99%, transparent), linear-gradient(to right, black 99.99%, transparent), linear-gradient(to bottom, black 99.99%, transparent);
  background-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%;
  background-repeat: no-repeat;
  animation: progress 4s linear forwards;
  background-position: -500px 0px, 495px -300px, 500px 295px, 0px 300px;
}
@keyframes progress {
  0% {
    background-position: -500px 0px, 495px -300px, 500px 295px, 0px 300px;
  }
  25% {
    background-position: 0px 0px, 495px -300px, 500px 295px, 0px 300px;
  }
  50% {
    background-position: 0px 0px, 495px 0px, 500px 295px, 0px 300px;
  }
  75% {
    background-position: 0px 0px, 495px 0px, 0px 295px, 0px 300px;
  }
  100% {
    background-position: 0px 0px, 495px 0px, 0px 295px, 0px 0px;
  }
}

<!-- prefix free library is only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="progress"></div>

没有自动动画的CSS版本：

这是该片段的CSS版本，它接受输入百分比值并根据该值设置边框。在文本框中提供0到100之间的值，然后单击Enter。

window.onload = function() {
  var progress = document.querySelector('.progress'),
    totalLength = (progress.offsetWidth * 2) + (progress.offsetHeight * 2);

  var btn = document.querySelector('#enter'),
    progressVal = document.querySelector('#progress');

  btn.addEventListener('click', function() {
    input = (progressVal.value > 100) ? 100 : progressVal.value;
    borderLen = (input / 100) * totalLength;
    console.log(borderLen);
    if (borderLen <= progress.offsetWidth) {
      backgroundPos = 'background-position: ' + (-500 + borderLen) + 'px 0px, 495px -300px, 500px 295px, 0px 300px';
      progress.setAttribute('style', backgroundPos);
    } else if (borderLen <= (progress.offsetWidth + progress.offsetHeight)) {
      backgroundPos = 'background-position: 0px 0px, 495px ' + (-300 + (borderLen - progress.offsetWidth)) + 'px, 500px 295px, 0px 300px';
      progress.setAttribute('style', backgroundPos);
    } else if (borderLen <= (progress.offsetWidth * 2 + progress.offsetHeight)) {
      backgroundPos = 'background-position: 0px 0px, 495px 0px, ' + (500 - (borderLen - progress.offsetWidth - progress.offsetHeight)) + 'px 295px, 0px 300px';
      progress.setAttribute('style', backgroundPos);
    } else {
      backgroundPos = 'background-position: 0px 0px, 495px 0px, 0px 295px, 0px ' + (300 - (borderLen - (progress.offsetWidth * 2) - progress.offsetHeight)) + 'px';
      progress.setAttribute('style', backgroundPos);
    }
  });
};

.progress {
  height: 300px;
  width: 500px;
  margin-top: 20px;
  background: linear-gradient(to right, black 99.99%, transparent), linear-gradient(to bottom, black 99.99%, transparent), linear-gradient(to right, black 99.99%, transparent), linear-gradient(to bottom, black 99.99%, transparent);
  background-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%;
  background-repeat: no-repeat;
  background-position: -500px 0px, 495px -300px, 500px 295px, 0px 300px;
}

<!-- prefix free library is only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input id='progress' type='text' />
<button id='enter'>Set Progress</button>
<div class="progress"></div>

---

使用SVG：

使用SVG，步骤如下：

• 创建一个单一的 path 元素作为盒子的边框，并使用 getTotalLength() 方法获取它的长度。
• 设置 path 的 stroke-dasharray 和 stroke-dashoffset 属性，使得路径最初是看不见的。
• 根据进度百分比修改 stroke-dashoffset，就能产生类似进度条的效果。

我再次使用动画自动触发从开始到结束的移动，但如果您想要类似于进度条的效果，可以删除动画，并根据进度百分比设置偏移量。

window.onload = function() {
  var progress = document.querySelector('.progress path');
  var borderLen = progress.getTotalLength() + 5,
    offset = borderLen;
  progress.style.strokeDashoffset = borderLen;
  progress.style.strokeDasharray = borderLen + ',' + borderLen;
  anim = window.requestAnimationFrame(progressBar);

  function progressBar() {
    offset -= 1;
    progress.style.strokeDashoffset = offset;
    anim = window.requestAnimationFrame(progressBar);
    if (offset < 0)
      window.cancelAnimationFrame(anim);
  }
};

.progress {
  height: 300px;
  width: 500px;
}
.progress svg {
  height: 100%;
  width: 100%;
}
path {
  stroke: black;
  stroke-width: 5;
  fill: none;
}

<div class="progress">
  <svg viewBox='0 0 510 310' preserveAspectRatio='none'>
    <path d='M5,5 505,5 505,305 5,305 5,2.5' />
    <!-- end is start point - stroke width/2 -->
  </svg>
</div>

没有自动动画的SVG版本：

这是一个SVG代码片段，它接受一个输入百分比值并根据该值设置边框。在文本框中提供0到100之间的值，然后点击Enter。

window.onload = function() {
  var progress = document.querySelector('.progress path');
  var borderLen = progress.getTotalLength() + 5,
    offset;
  progress.style.strokeDashoffset = borderLen;
  progress.style.strokeDasharray = borderLen + ',' + borderLen;
  
  var btn = document.querySelector('#enter'),
      progressVal = document.querySelector('#progress');
    
    btn.addEventListener('click', function(){
        input = (progressVal.value > 100) ? 100 : progressVal.value;
        offsetToSet = (input/100) * borderLen;
        console.log(borderLen - offsetToSet);
        progress.style.strokeDashoffset = borderLen - offsetToSet;
    });
};

.progress {
  height: 300px;
  width: 500px;
}
.progress svg {
  height: 100%;
  width: 100%;
}
path {
  stroke: black;
  stroke-width: 5;
  fill: none;
}

<input id='progress' type='text'/>
<button id='enter'>Set Progress</button>
<div class="progress">
  <svg viewBox='0 0 510 310' preserveAspectRatio='none'>
    <path d='M5,5 505,5 505,305 5,305 5,2.5' />
    <!-- end is start point - stroke width/2 -->
  </svg>
</div>

- Harry

---

谢谢，这是一个非常棒的方法！它既便宜又简单。我本来打算用一种复杂而昂贵的方式来实现相同的结果。 - bigfanjs