[CSS/JS]圆形不封闭进度条实现

圆形不封闭进度条实现

数值为0数值为80数值为100
如上图所示,如何实现这种圆形且不封闭的进度条
我的思路是:
首先建立一个div装这个进度条,并将其旋转-120度
在这里插入图片描述
将其分为两个相等的div
在这里插入图片描述
两边各画一个圆,将圆加上border变成圆环,将一半的圆环颜色置为透明,在外部容器修改成溢出隐藏overflow: hidden;通过旋转达到意图效果,实现进度条底色的显示
在这里插入图片描述
再在两边绘制两个圆环,通过让一半圆环透明变成两个半圆环,颜色换成进度条颜色,再经过旋转达到初始位置,左半圆是红色,右半圆是黄色,排布如下图
在这里插入图片描述
在输入数值后,通过js的运算判断,两个圆环旋转达到以下效果
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
将两种圆环的颜色换成相同颜色后,就完美实现效果
在这里插入图片描述在这里插入图片描述在这里插入图片描述
源代码如下

<!DOCTYPE html>
<html>

<head>
  <title>圆形未封闭进度条</title>
</head>

<body>
  <div class="container">
    <div class="progress">
      <div class="wrapper right">
        <div class="circle rightcircle-box"></div>
        <div class="circle rightcircle" id="right"></div>
      </div>
      <div class="wrapper left">
        <div class="circle leftcircle-box"></div>
        <div class="circle leftcircle" id="left"></div>
      </div>
    </div>
    <div class="input">
      <input type="text" id="num">
      <button id="btn">点击</button>
    </div>
    <p id="score"></p>
  </div>
  
  <script type="text/javascript">
  function circleOfScore(index) {
    var score = index ? index : 0;
    var right = 100 * 180 / 270;
    var left = 100 - right;
    var rightDeg;
    var leftDeg;
    var rightCircle = document.getElementById("right");
    var leftCircle = document.getElementById("left");
    var scorenum = document.getElementById("score");
    scorenum.innerHTML = index;

    if (score <= right) {
      rightDeg = score / right * 180 - 135;
      leftDeg = -135;
    } else if (score < 100) {
      rightDeg = 45;
      leftDeg = (score - right) / 100 * 135 - 135;
    } else {
      rightDeg = 45;
      leftDeg = -75;
    }

    rightCircle.style.transform = 'rotate(' + rightDeg + 'deg)';
    leftCircle.style.transform = 'rotate(' + leftDeg + 'deg)';

  }

  var btn = document.getElementById("btn");
  btn.onclick = function() {
    var num = document.getElementById("num").value;
    circleOfScore(num);
  }
  </script>
  <style type="text/css">
  /* 圆环 */
  .container {
    width: 475px;
    height: 600px;
  }


  .progress {
    position: relative;
    width: 400px;
    height: 400px;
    bottom: -40px;
    top: 206px;
    left: 268px;
    transform: rotate(-120deg);
  }

  .progress .wrapper {
    width: 200px;
    height: 400px;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .progress .left {
    left: 0;
  }

  .progress .right {
    right: 0;
  }

  .progress .circle {
    width: 384px;
    height: 384px;
    border: 8px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    transform: rotate(-135deg);
  }

  .progress .rightcircle-box {
    border-top: 8px solid #99edd1;
    border-right: 8px solid #99edd1;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    right: 0;
    transform: rotate(45deg);
  }

  .progress .leftcircle-box {
    border-bottom: 8px solid #99edd1;
    border-left: 8px solid #99edd1;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    left: 0;
    transform: rotate(-75deg);
  }

  .progress .rightcircle {
    border-top: 8px solid yellow;
    border-right: 8px solid yellow;
    animation: mymove 5s infinite;
    right: 0;
  }

  .progress .leftcircle {
    border-bottom: 8px solid yellow;
    border-left: 8px solid yellow;
    left: 0;
  }

  p {
    position: absolute;
    z-index: 3;
    top: 257px;
    left: 240px;
    width: 475px;
    font-size: 81px;
    text-align: center;
  }

  .input {
    position: absolute;
    top: 560px;
    left: 405px;
  }

  .input input {
    width: 100px;
    height: 60px;
    font-size: 40px;
  }

  .input button {
    height: 50px;
    width: 80px;
  }
  </style>
</body>

</html>
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现一个圆形进度条的动态效果,可以使用CSS中的@keyframes动和transform属性。 首先,创建一个包含圆形进度条的div元素,并设定其宽高和边框样式,使它呈现为圆形。 然后,使用CSS的@keyframes创建一个序列,在序列中设置进度条的旋转角度。例如,可以从0°开始旋转,到360°结束,表示进度条的完整程度。 接下来,在CSS中,为进度条的div元素添加animation属性,将刚才创建的动序列应用于进度条上,并设定动的持续时间、重复次数等。 最后,通过设置transform-origin属性,将进度条的旋转中心设置为圆心,使得进度条圆形元素中心点进行旋转,形成动态效果。 例如,下面是一个实现50%进度的圆形进度条CSS代码示例: ```css .circle { width: 100px; height: 100px; border: 5px solid #ccc; border-radius: 50%; animation: progress 2s linear infinite; transform-origin: center center; } @keyframes progress { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } ``` 这个示例中,圆形进度条的宽高为100px,边框为5px粗的灰色线条。动序列progress中,进度条从0°开始旋转到180°,持续2秒,线性变化,并无限循环播放。进度条的旋转中心被设置为圆心。 这样,通过CSS实现一个圆形进度条的动态效果。可以根据需要修改代码中的数值,实现不同的进度和动效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值