title: How to animate the element in jquery
body: <p>I am trying to animate my element using jquery.
  The purpose of the code is to be a speedometer on my server
  The element I am trying to animate is called <code>box3</code></p>
  <p><strong>NOTE</strong>: Code might not look the same for you as it looks for me. The code is running on FiveM Server</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if (data.akcija == "spidometar") {
  
      $(".box-tekstic").html(Math.round(data.speed))
      if (data.speed &gt; 0) {
        $("#SpeedIndicator").text(data.speed);
        let multiplier = data.maxspeed * 0.1;
        let SpeedoLimit = data.maxspeed + multiplier;
        Speedometer = (data.speed / SpeedoLimit);
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box-float{
      position: relative;
      right: 5vh;
      top: 34vh;
  }
  
  .box {
    
      --v:calc( ((18/5) * var(--p) - 90)*1deg);
      position: absolute;
      width:180px;
      height:180px;
      transform: rotate(160deg);
      border-radius:50%;
      padding:25px;
      background:
        linear-gradient(var(--v), transparent 50%,#4c4c4e        0) 0/min(100%,(var(--p) - 50)*100%),
        linear-gradient(to right, transparent 50%, #4c4c4e 0);
      -webkit-mask:
        linear-gradient(var(--v), #f2f2f2     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite:destination-out;
      mask-composite:exclude;
    }
  
  .box2 {
  
    --v:calc( ((18/5) * var(--p) - 90)*1deg);
    position: absolute;
    width:170px;
    left: 0.4vh;
    top: 5;
    height:170px;
    transform: rotate(160deg);
    border-radius:50%;
    padding:12px;
    background:
      linear-gradient(var(--v), transparent 50%,#8a8989        0) 0/min(100%,(var(--p) - 50)*100%),
      linear-gradient(to right, transparent 50%, #8a8989 0);
    -webkit-mask:
      linear-gradient(var(--v), #f2f2f2     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;
    mask-composite:exclude;
  }
  
  .box3 {
    
    --v:calc( ((18/5) * var(--p) - 90)*1deg);
    position: absolute;
    left: 0.4vh;
    top: 5;
    width:170px;
    height:170px;
    transform: rotate(160deg);
    border-radius:50%;
    padding:12px;
    background:
      linear-gradient(var(--v), transparent 50%,#b7ff00        0) 0/min(100%,(var(--p) - 50)*100%),
      linear-gradient(to right, transparent 50%, #b7ff00 0);
    -webkit-mask:
      linear-gradient(var(--v), #f2f2f2     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;
    mask-composite:exclude;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box-float"&gt;
      &lt;div class="box" style="--p:68;"&gt;&lt;/div&gt;
      &lt;div class="box2" style="--p:68;"&gt;&lt;/div&gt;
      &lt;div class="box3" style="--p:50;"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>