CODEWITHSUNDEEP
htmlcssbootstrap-4
TroyPilewski
TroyPilewski

Reputation: 369

Progress Bars Don't Animate

I have a list of progress bars which I would like to see animate. I see them animate when I use the maxcdn but not if I use local bootstrap references. Please help me understand what wrong...

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}
.header {
    text-align: center;
    line-height: 4px;
}
.header hr {
    margin: 5px;
}
.name {
    text-transform: uppercase;
    font-size: 32px;
}
.contact p {
    margin: 10px;
}
.summary h2, .skills h2, .professionalhistory h2, .education h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.skills {
    line-height: 13px;
}
.skills p {
    margin: 8px 8px 8px 8px;
}
.progress {
    background-color: #BCBEBF;
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}
.progress-bar {
    background-color: #323232;
    text-align: left;
    line-height: 13px;
    padding: 1px 10px 2px;
}
.progress-bar span {
    padding: 1px 10px 2px;
    position: absolute;
    z-index: 2;
    color: white;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}
.employer {
    font-size: 16px;
    font-weight: bold;
}
.position {
    text-decoration: underline;
}
.description {
    width: 95%; 
    margin-left: 12px;
}
.results {
    font-weight: bold;
}
.titles {
    text-decoration: underline;
}
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <p>Microsoft Office SharePoint Services</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
      <span>7 Years</span>
    </div>
  </div>
</body>

In the snippet I am using the maxcdn but if I remove the maxcdn the progress bars still display but don't animate. I am not sure why. Boot version is 4.0.0 alpha 6.

Upvotes: 0

Views: 2015

Answers (2)

Davide
Davide

Reputation: 577

Jsfiddle example: https://jsfiddle.net/a2f6g3gs/

Add:

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        var progress = setInterval(function() {
        var $bar = $('.progress-bar');

        if ($bar.width()>=400) {
            clearInterval(progress);
            $('.progress-bar').removeClass('active');
        } else {
            $bar.width($bar.width()+40);
        }
        //$bar.text($bar.width()/4 + "%");
    }, 1);
    });
</script>
<style>
    .progress .progress-bar {
        -moz-animation-name: animateBar;
        -moz-animation-iteration-count: 1;
        -moz-animation-timing-function: ease-in;
        -moz-animation-duration: .4s;

        -webkit-animation-name: animateBar;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-duration: .4s;

        animation-name: animateBar;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: .4s;
    }

    @-moz-keyframes animateBar {
        0% {-moz-transform: translateX(-100%);}
        100% {-moz-transform: translateX(0);}
    }
    @-webkit-keyframes animateBar {
        0% {-webkit-transform: translateX(-100%);}
        100% {-webkit-transform: translateX(0);}
    }
    @keyframes animateBar {
        0% {transform: translateX(-100%);}
        100% {transform: translateX(0);}
    }
</style>

Upvotes: 0

APAD1
APAD1

Reputation: 13666

In Bootstrap 4 you need to add the class progress-bar-animated to the progress-bar element.

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}
.header {
    text-align: center;
    line-height: 4px;
}
.header hr {
    margin: 5px;
}
.name {
    text-transform: uppercase;
    font-size: 32px;
}
.contact p {
    margin: 10px;
}
.summary h2, .skills h2, .professionalhistory h2, .education h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.skills {
    line-height: 13px;
}
.skills p {
    margin: 8px 8px 8px 8px;
}
.progress {
    background-color: #BCBEBF;
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}
.progress-bar {
    background-color: #323232;
    text-align: left;
    line-height: 13px;
    padding: 1px 10px 2px;
}
.progress-bar span {
    padding: 1px 10px 2px;
    position: absolute;
    z-index: 2;
    color: white;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}
.employer {
    font-size: 16px;
    font-weight: bold;
}
.position {
    text-decoration: underline;
}
.description {
    width: 95%; 
    margin-left: 12px;
}
.results {
    font-weight: bold;
}
.titles {
    text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <p>Microsoft Office SharePoint Services</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
      <span>7 Years</span>
    </div>
  </div>
</body>

Upvotes: 2

Related Questions