多个循环进度条使用jquery获取相同的选项

xzabzqsa 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(131)

我试图创建需要多个进度条重叠的进度条我这样做使用HTML，CSS和jquery。问题是，都得到相同的参数，虽然我已经分配了不同的参数。
超文本标记语言：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./grasp_mobile_progress_circle-1.0.0.css">
</head>
<body>
    <div class="main-container">
        <div id="outer-progress-bar">
            <div class="dashed">

            </div>
        </div>
        <div id="my-progress-bar">

        </div>

    </div>
    
</body>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <script src="./grasp_mobile_progress_circle-1.0.0.js"></script>
    <script src="./index1.js"></script>
    <script src="./index2.js"></script>
</html>

字符串
CSS：

body {
  }
  .main-container{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
  }
    .outer-progress-bar{
    border-radius: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    left: -20px;
    top: -20px;

    

  }
  .dashed{
    width: 170px;
    height: 170px;
    border: 2px dashed red;
    position: absolute;
    left: 37px;
    
    border-radius: 50%;
  }
  .my-progress-bar {
    position: absolute;
    left: 0%;
    z-index: 1;
    /* transform: translate(-50%, -50%); */
  }

型
index1.js:

$(document).ready(function () {
    var options1 = {
        line_width: 5,
        color: "green",
        starting_position: 0,
        width: "120px",
        height: "120px",
        text: "",
        percent: 0,
    };

    var progress_circle1 = $("#my-progress-bar").gmpc(options1);
progress_circle1.gmpc('animate', 80, 500);
});

型
index2.js:

var a=$(document).ready(function () {
    var options2 = {
        line_width: 12,
        color: "red",
        starting_position: 0,
        percent: 0,
        width: "300px",
        height: "300px",
        text: "",
        percentage: true,
    };
    
    var progress_circle2 = $("#outer-progress-bar").gmpc(options2);
    progress_circle2.gmpc('animate', 70, 500); 
});

型
这是这段代码的结果：

的数据
我想达到这样的结果：

的

jquery

来源：https://stackoverflow.com/questions/77607019/multiple-circular-progress-bar-getting-same-options-using-jquery

1条答案

按热度按时间

bihw5rsg1#

你可以使用css遮罩来隐藏部分圆形边框，然后使用@property注册并设置css变量的动画。或者你也可以使用js来处理动画。这里有一个实现这个目标的演示。this answer很好地解释了如何使用遮罩和css来制作圆弧，我的演示只是使用js来处理设置css变量，而且不关心使一个填补中心的弧。如果你有任何问题或需要澄清，我总是很乐意帮助！

const get = query => document.querySelector(query);
let outerPercent = 0;
get(".btn-outer").addEventListener("click", () => {
  outerPercent = (outerPercent + 10) % 110;
  get(".progress-outer").style.setProperty("--p", `${outerPercent}%`);
});
let innerPercent = 0;
get(".btn-inner").addEventListener("click", () => {
  innerPercent = (innerPercent + 10) % 110;
  get(".progress-inner").style.setProperty("--p", `${innerPercent}%`);
});

* {
  box-sizing: border-box;
}

body {
  margin: 0; min-height: 100dvh;
  display: grid; 
  justify-content: center;
  align-content: center;
}

.display-container {
  min-width: 100px;
  aspect-ratio: 1;
  border: 1px solid black;
  position: relative;
  --arc-thickness: 10px;
}

.dotted-ring {
  height: 80%;
  width: 80%;
  border-radius: 50%;
  border:
    calc(var(--arc-thickness) / 2)
    dashed black;
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
}

@property --p {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true
}

.progress-outer, .progress-inner {
  --p: 0%;
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  border: solid var(--arc-thickness) hotpink;
  width: calc(
    80% + var(--arc-thickness) / 2
  );
  aspect-ratio: 1;
  border-radius: 50%;
  transition: --p 250ms;
  --mask:  conic-gradient(#000 var(--p), transparent 0%);
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.progress-inner {
  --p: 0%;
  border-color: lightblue;
  width: calc(
    50% + var(--arc-thickness) / 2
  );
}

<div class="display-container">
  <div class="dotted-ring"></div>
  <div class="progress-outer"></div>
  <div class="progress-inner"></div>
</div>
<button class="btn-outer"> outer up 10% </button>
<button class="btn-inner"> inner up 10% </button>

赞(0）回复(0）举报 12个月前

我来回答

多个循环进度条使用jquery获取相同的选项

1条答案

相关问题

热门标签

最新问答