I am trying to create progress bar which require multiple progress bar to overlap i am doing this using HTML , CSS and jquery. the problem is that both getting same parameters although i have assigned different parameters to both.
HTML:
<!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);
});
This is the result of this code:

I want to achieve this result:
