How to make percentage filling up with jquery + js

问题

I am working on project to make percentage number increase and at the same time inside of the percentage number there is background color it needs to fill up according to percentage itself. So far it is working but only background animation of itself. I mean if its 50 percent it needs to come half of the 50% number. if its 100 it needs to make color all the background of 100% number. Here are the relative code of the html and css.

var i = 0;

var perc = 0;

function buttonClick6() {

  perc += 5;
  document.getElementById('here').innerHTML = percentage(perc) + "%";
}

function buttonClick5() {
  i += 5;
  document.getElementById('demo').innerHTML = "€" + i;
}

function percentage(per) {
  return (100 / 100) * per;
}
$(document).ready(function() {
  var skillBar = $('.inner');
  var skillVal = skillBar.attr("data-progress");
  $(skillBar).animate({
    height: skillVal
  }, 2100);

});

body {
  position: absolute;
  width: 1670px;
  height: 1030px;
  font-family: arial;
  background-color: black;
}

.outer {
  width: 100%;
  height: 386px;
  overflow: hidden;
  position: relative;
  margin-top: 300px;
  text-align: center;
}

.inner {
  background: url(color3.jpg);
  bottom: 0;
  height: 0%;
  width: 100%;
  overflow: hidden;
  animation: animateMid 15s linear infinite;
  -webkit-background-clip: text;
  position: absolute;
}

.inner h2 {
  font-size: 500px;
  margin-top: -95px;
  color: rgba(225, 225, 225, .1);
}

@keyframes animateMid {
  0% {
    background-position: left 800px top 500px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="skill">
    <div class="outer">
      <div class="inner" data-progress="100%">
        <h2 id="demo">0</h2>
        <div></div>
      </div>
    </div>
  </div>



  <div class="perc">
    <h3 id="here">0%</h3>
  </div>

  <button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>

回答1:

The way you have added CSS or HTML is by adding the scrollbar. Remove the scrollbar and the whole animation will be in one frame.

 var i = 0;

        var perc = 0;

        function buttonClick6() {

            perc += 5;
            document.getElementById('here').innerHTML = percentage(perc) + "%";
            document.getElementById('demo2').style.height = (125 - percentage(perc)) + "%";
        }

        function buttonClick5() {
            i += 5;
            document.getElementById('demo').innerHTML = "€" + i;
            document.getElementById('demo2').innerHTML = "€" + i
        }

        function percentage(per) {
            return (100 / 100) * per;
        }

        $(document).ready(function() {
            var skillBar = $('.inner');
            var skillVal = skillBar.attr("data-progress");
            $(skillBar).animate({
                height: skillVal
            }, 2100);

        });

body {
            position: absolute;
            width: 1670px;
            height: 1030px;
            font-family: arial;
            background-color: black;
        }
        
        .outer {
            width: 100%;
            height: 386px;
            overflow: hidden;
            position: relative;
            margin-top: 300px;
            text-align: center;
        }
		
		h3{
		 color: white;
		}
        
        .inner {
    background: url(color3.jpg);
    bottom: 0;
    height: 0%;
    width: 100%;
    overflow: hidden;
    animation: animateMid 15s linear infinite;
    -webkit-background-clip: text;
    position: absolute;
}
        
        .inner h2 {
            font-size: 500px;
            margin-top: -95px;
            color: #fff;
        }
        
        @keyframes animateMid {
            0% {
                background-position: left 800px top 500px;
            }
        }

p {
    color: transparent;
    font-size: 500px;
    top: -95px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 130%;
    margin: 0;
    position: absolute;
    font-weight: bold;
    background: #2c2c2c;
    background-clip: text;
    -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="skill">
        <div class="outer">
            <div class="inner" data-progress="100%" data-value="0">
			<p id="demo2">0</p>
                <h2 id="demo">0</h2>
                <div></div>
            </div>
        </div>
    </div>

    <div class="perc">
        <h3 id="here">0%</h3>
    </div>

    <button class="btn" onclick="buttonClick5(),buttonClick6()">Donate 5€</button>

来源：https://stackoverflow.com/questions/58818488/how-to-make-percentage-filling-up-with-jquery-js

标签

javascript

html

css

jquery-animate