I want the progress bars to fill or get empty when they are in viewport, but only once

时间：2017-10-12 10:12:58

标签： javascript html css animation progress-bar

I have done some work and somehow managed to put animation in the progress bars. I have added the wow.min.js and animate.css file too in my code. The progress bars are working fine...the increase batch is working only once, all the 5 bars...but the decrease batch is happening each time m scrolling the window. How to overcome this?? I dont know why its not working here, the js is working fine in my system. If someone could guide a little...

$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
$(".progress-bar-fill2").each((i, el) => {
	var jel = $(el)
	jel.css({"width": '100%',"transition":"0s"});
	
	setTimeout( () => {
		console.log( jel.attr('data-val'),  {"width": jel.attr('data-val') + '%',"transition":"5s"})
		jel.css({"width": jel.attr('data-val') + '%',"transition":"5s"})
		
	}, 0)
})
});
.progress-bar {
    width: 100%;
    height: 50px;
    background: #e0e0e0;
    
}

.progress-bar-fill {
    display: block;
    height: 50px;
    background: #659cef;
	float:left;
    
    /*transition: width 250ms ease-in-out;*/
    transition: width 5s ease-in-out;
}
.progress-bar2 {
    width: 100%;
    height: 50px;
    background: #ffffff;
    
}

.progress-bar-fill2 {
    display: block;
    height: 50px;
    background: #659cef;
	float:left;
    
    
}
<div class="container" style=" align-center margin: auto; height: 750px;">
	
        
	<center><div class="container" style="width:50%; background-color:#ffffff; float: left; height: auto;">
	
        
		<h3 class="mbr-section-subtitle pb-5 mbr-fonts-style display-5 wow zoomIn" style="color: black">
            </br>Increases
        </h3>

        <div class="progress_elements" style="width:80%">
            <div class="progress1 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Internal Customer Satisfaction</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
            
			<div class="progress2 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                           <b>Reporting Platform Capability</b>
                        </p>
                    </div>
                
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
            
            <div class="progress3 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Custom Metrics Table Capability</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
            
            <div class="progress4">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Advanced Business Analysis Capability</b>
                        </p>
                    </div>
                
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
			
			</br><div class="progress5 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Data Profiling Capability</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar wow slideInUp">
					<span class="progress-bar-fill" style="width: 0%"></span>
				</div>
            </div>
            
        </div>
		
	</div></center>
	
	
	
	
	
	<center><div class="container" style="width:50%; background-color: #dddddd; float: right;  height:auto;">
		
		<h3 class="mbr-section-subtitle pb-5 mbr-fonts-style display-5 wow zoomIn" style="color: black">
            </br>Decreases
        </h3>

        <div class="progress_elements" style="width: 80%; ">
            
			<div class="progress1 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Initial Cost</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="20" style="width: 10%"></span>
				</div>
            </div>
			
			<div class="progress2 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                           <b>Reoccurring Cost</b>
                        </p>
                    </div>
                
                </div>
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="0" style="width: 0%"></span>
				</div>
            </div>
            
            <div class="progress3 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Implementation Time</b>
                        </p>
                    </div>
                    
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="10"style="width: 20%"></span>
				</div>
            </div>
			</div>
            
            <div class="progress4">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>Reporting Dev Cost/Time</b>
                        </p>
                    </div>
                
                </div>
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="30"style="width: 8%;"></span>
				</div>
            </div>
			
			</br><div class="progress5 pb-5">
                <div class="title-wrap">
                    <div class="progressbar-title mbr-fonts-style display-7 wow slideInUp">
                        <p>
                            <b>IT Request</b>
                        </p>
                    </div>
                    
                </div>
                <div class="progress-bar2 wow slideInUp">
					<span class="progress-bar-fill2" data-val="08" style="width: 10%"></span>
				</div>
            </div>
			
            
        </div>
		
	</div></center>
	
	

		
    </div>
	
	</div>

<div class="progress1 pb-5">
                    <div class="title-wrap">
                        <div class="progressbar-title mbr-fonts-style display-7">
                            <p>
                                Initial Cost
                            </p>
                        </div>
                        <div class="progress_value mbr-fonts-style display-7">
                            
                            
                        </div>
                    </div>
                    <progress class="progress progress-primary" max="100" value="15" style="width:100%">
                    </progress>
    </div>
    

<div class="progress1 pb-5">
                    <div class="title-wrap">
                        <div class="progressbar-title mbr-fonts-style display-7">
                            <p>
                                Internal Customer Satisfaction
                            </p>
                        </div>
                        
                    </div>
                    <progress class="progress progress-primary" max="100" value="100" style="width:100%">
                    </progress>
    </div>

3 个答案:

答案 0 :(得分：0)

这可能有帮助

function move() {
  var elem1 = document.getElementById("myBar1"); 
  var elem2 = document.getElementById("myBar2");
  var width = 30;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem1.style.width = width + '%'; 
      if( width<70)
      {
                elem2.style.width =(100 - width) + '%';
      
      }
    }
  }
}
#myProgress1,#myProgress2 {
  width: 100%;
  background-color: #ddd;
}

#myBar1{
  width: 30%;
  height: 30px;
  background-color: #4CAF50;
}

#myBar2 {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
}
<div id="myProgress1">
  <div id="myBar1"></div>
</div>
<br/>
<div id="myProgress2">
  <div id="myBar2"></div>
</div>
<br/>
<button onclick="move()">Click Me</button>

或者你也可以控制进度控制。

var elem1 = document.getElementById("progress1"); 
  var elem2 = document.getElementById("progress2");
  var width = 30;
  var id = setInterval(frame, 30); // adjust the speed of animation
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem1.value = width ; 
      if( width<70)      
      {
                elem2.value =(100 - width) ;
      
      }
    }
  }
<div class="title-wrap">
  <div class="progressbar-title mbr-fonts-style display-7">
    <p>
      Initial Cost
    </p>
  </div>                  
</div>

<progress id="progress1" class="progress progress-primary" max="100" value="15" style="width:100%"></progress>
<div class="title-wrap">
  <div class="progressbar-title mbr-fonts-style display-7">
    <p>
      Internal Customer Satisfaction
    </p>
  </div>                  
</div>
<progress id="progress2" class="progress progress-primary" max="100" value="100" style="width:100%"></progress>
<br/>

答案 1 :(得分：0)

首先将id="progress1"和id="progress2"放入进度代码中，如下所示：

<progress id="progress1" class="progress progress-primary" max="100" value="15" style="width:100%"></progress>

<progress id="progress2" class="progress progress-primary" max="100" value="100" style="width:100%"></progress>

然后添加以下javascript代码：

<script>
   var progress1 = document.getElementById("progress1");
   var progress2 = document.getElementById("progress2");

   progress1.value = "100";
   progress2.value = "30";
</script>

您可以根据某些事件操纵进度值。

答案 2 :(得分：0)

您需要js脚本来执行这些更新。

就像示例一样 - 此处每秒的初始成本进度更新+1％

(function(){
  var action = function(){
    var initialCostProgressValue = $("#initial-cost").val();
    
    if(initialCostProgressValue >= 100){
      clearInterval(pbInterval);
      return;
    }
    
    $("#initial-cost").val($("#initial-cost").val() + 1);    
    
  };
  var pbInterval = setInterval(function() {
    action();
  }, 1500);
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress1 pb-5">
                    <div class="title-wrap">
                        <div class="progressbar-title mbr-fonts-style display-7">
                            <p>
                                Initial Cost
                            </p>
                        </div>
                        <div class="progress_value mbr-fonts-style display-7">
                            
                            
                        </div>
                    </div>
                    <progress id="initial-cost" class="progress progress-primary" max="100" value="15" style="width:100%">
                    </progress>
    </div>
    

<div class="progress1 pb-5">
                    <div class="title-wrap">
                        <div class="progressbar-title mbr-fonts-style display-7">
                            <p>
                                Internal Customer Satisfaction
                            </p>
                        </div>
                        
                    </div>
                    <progress  id="initernal-customer-satisfaction"  class="progress progress-primary" max="100" value="100" style="width:100%">
                    </progress>
    </div>

相关问题
最新问题