当前位置: 首页 > 面试题库 >

Progress bar along the borders of a rectangle

钮誉
2023-03-14
问题内容

我试图弄清楚如何在矩形周围实现进度条。假设我的div为500x300,边框为5px(黑色)。

我希望进度条从左上角开始,然后转到->右角->底部-右角->左下角->然后回到


问题答案:

CSS:

CSS可以使用多个线性渐变作为
背景并将其适当放置,从而达到此效果。html" target="_blank">方法如下:

linear-gradient为元素的每个边框创建4个稀薄的背景。边框的粗细决定了background-size。也就是说,如果边框厚度为5px,则产生顶部和底部边框的线性渐变将为100% 5px(100%宽度5px高度),而产生左右边框的线性渐变将为5px 100%(3px宽度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()方法获得其长度。设置stroke-dasharray和的stroke-dashoffset属性,以path使路径最初不可见。通过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>


 类似资料:

相关阅读

相关文章

相关问答