引导动画进度条

我累了创造自举动画进度条，就像下面引导动画进度条

，但我无法得到正确的输出，我已经加了我的HTML代码，Javascript代码&图像CSS代码

HTML代码

<p class="progress-text">html5</p> 
<div class="progress"><div class="progress-bar" data-present="95%"></div></div> 
<p class="progress-text">css3</p> 
<div class="progress"><div class="progress-bar" data-present="90%"></div></div>

CSS代码

.progress-text{ 
    text-transform: uppercase; 
    color: #333; 
    margin-bottom: 5px; 
    line-height: 18px; 
    font-size: 12px; 
} 

.progress{ 
    background-color: transparent; 
    border-radius: 0; 
    box-shadow: none; 
    height: 3px; 
    margin-bottom: 15px; 
    overflow: visible; 
} 

.progress:last-child{ 
    margin-bottom: 0; 
} 

.progress .progress-bar{ 
    background: #3f51b5; 
    background: transparent -webkit-linear-gradient(left, #3f51b5, #ff4081); 
    background: transparent linear-gradient(to right, #3f51b5, #ff4081); 
    position: relative; 
    -webkit-transition: all 1.5s ease 0.3s; 
    transition: all 1.5s ease 0.3s; 
    color: inherit; 
    opacity: 0; 
} 

.progress .progress-bar:before{ 
    position: absolute; 
    right: 0; 
    content: attr(data-present); 
    top: -24px; 
    color: inherit; 
}

的Java Script代码

(function ($) { 
"use strict"; 
var $progressBar = $('.progress-bar'); 
$progressBar.appear(function() { 
    $progressBar.each(function(){ 
     var $progressBarWidth = $(this).data('present'); 
     $(this).css({'width': $progressBarWidth, 'opacity': '1', }); 
    }); 
}); 
})(jQuery);

引导版本3.3.7

jQuery的版本 1.12.0

来源

2017-08-18 muthukrishnan91

删除'$ progressBar.appear（函数（）{}）'这个函数调用，它会工作... [小提琴]（https：//开头的jsfiddle .net/1aug3w2j /） –

感谢此代码工作正常 – muthukrishnan91

.progress-title{ 
 
    font-size: 16px; 
 
    font-weight: 700; 
 
    color: #011627; 
 
    margin: 0 0 20px; 
 
} 
 
.progress{ 
 
    height: 10px; 
 
    background: #0488cc; 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
    margin-bottom: 30px; 
 
    overflow: visible; 
 
} 
 
.progress .progress-bar{ 
 
    box-shadow: none; 
 
    position: relative; 
 
    -webkit-animation: animate-positive 2s; 
 
    animation: animate-positive 2s; 
 
} 
 
.progress .progress-bar:after{ 
 
    content: ""; 
 
    display: block; 
 
    border: 15px solid transparent; 
 
    border-bottom: 21px solid transparent; 
 
    position: absolute; 
 
    top: -26px; 
 
    right: -12px; 
 
} 
 
.progress .progress-value{ 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    color: #000; 
 
    position: absolute; 
 
    top: -40px; 
 
    right: 0; 
 
} 
 
.progress.pink .progress-bar:after{ 
 
    border-bottom-color: #ff4b7d; 
 
} 
 
.progress.green .progress-bar:after{ 
 
    border-bottom-color: #5fad56; 
 
} 
 
.progress.yellow .progress-bar:after{ 
 
    border-bottom-color: #e8d324; 
 
} 
 
.progress.blue .progress-bar:after{ 
 
    border-bottom-color: #3485ef; 
 
} 
 
@-webkit-keyframes animate-positive{ 
 
    0% { width: 0; } 
 
} 
 
@keyframes animate-positive{ 
 
    0% { width: 0; } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h3 class="progress-title">HTML5</h3> 
 
      <div class="progress pink"> 
 
       <div class="progress-bar" style="width:90%; background:#ff4b7d;"> 
 
        <div class="progress-value">90%</div> 
 
       </div> 
 
      </div> 
 
    
 
      <h3 class="progress-title">CSS3</h3> 
 
      <div class="progress green"> 
 
       <div class="progress-bar" style="width:75%; background:#5fad56;"> 
 
        <div class="progress-value">75%</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

这只是设计的CSS属性

来源

2017-08-18 09:06:02 devadinesh

引导动画进度条

回答

相关问题