jQuery Add/Remove Input Fields

A script that uses event delegation and the .live() method for adding and deleting extra input form fields.

by Muthuraman B

HTML

<script src="https://www.cssscript.com/demo/horizontal-circular-progress-bar-library/progressBar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.9.0/Tween.js"></script>
<div class="progress"></div>
<div class="text">0%</div>
<div class="svg">
  <svg height="100%" width="100%">
    <circle class="round-progress" cx="50" cy="50" r="45" />
  </svg>
</div>
</div>

CSS

body { background-color: #fafafa; }
.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 10px;
  background: #C0392B;
  box-shadow: 0 0 3px #C0392B;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #000;
  border: none;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  text-align: center;
  line-height: 100px;
}

.round-progress {
  fill: none;
  stroke: #34495E;
  stroke-width: 5;
  stroke-dasharray: 1000;
}

.svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  transform: rotate(-90deg);
}

JavaScript

let topProgress = new progressBar({
  type: "top", //top, circle
  targetClass: "progress",
  value: 100, //final value
  duration: 2000, //ms
  completeDuration: 500 //ms
});
setTimeout(() => {
  topProgress.complete();
}, 2000);

let circleProgress = new progressBar({
  type: "circle", //top, circle
  targetClass: "round-progress",
  textClass: "text",
  value: 100, //final value
  duration: 2000, //ms
  completeDuration: 500 //ms
});
setTimeout(() => {
  circleProgress.complete();
}, 2000);