Progress Indicators Do Not Move

I have a collection of progress bars that I want to animate. They work fine with maxcdn, but not with local bootstrap references. Can someone please help me figure out what's causing this issue?

.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>

Even though I'm using maxcdn in the code snippet, the progress bars stop animating without it. I'm unsure of what might be causing this discrepancy. The Bootstrap version I'm using is 4.0.0 alpha 6.

htmlcssbootstrap-4

Answer №1

When using Bootstrap 4, make sure to include the class progress-bar-animated in 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>

Answer №2

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

Enhancements:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Sort function malfunctioning and not correctly sorting

I am having trouble sorting div elements by price values. The code seems to be working fine, but the sorting of numbers doesn't appear to be completely accurate. For example, in my jsfiddle, when the button is clicked, the number 21.35 is displayed a ...

javascriptjqueryhtmlsorting

Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

In my search on SO, I came across a lot of information about rotating gradients. However, my issue is the opposite. I have an icon created from multiple paths that I want to fill with a vertical gradient. I have successfully done this and it works well. ...

cssanimationsvglinear-gradients

Slider UI handle in jQuery sliding out of the div container

Could you assist me with a technical issue I am facing? I need to know how and where to prevent the .ui-slider-handle from exceeding the div when it reaches 100%. Feel free to check out the live preview at https://codepen.io/Melwee/pen/Exjwoyo I have inc ...

jquerycssjquery-ui

Bootstrap version 5 has a feature where the dropdown menu extends beyond the right side of the screen

I'm facing an issue with the default bootstrap 5 navbar. When I attempt to add a dropdown on the right side, the list of dropdown items extends beyond the screen on the right. You can see the problem here. I've tried the solutions suggested in s ...

htmlcssbootstrap-4bootstrap-5

Issues with PHP Form Email DeliveryIt seems that there is a

I currently have a ready-made form that is constructed using html, css, jquery, and ajax. It's basically copied and pasted onto my contact page for now. This is the code I include before the html tag on the contact.php page. <?php session_name(" ...

phpjqueryhtmlcssforms

How can I utilize Javascript, HTML, JQuery, and CSS to dynamically set a variable based on a HTML Select's OnChange event, perform calculations, and automatically update the result?

I'm in the process of creating a pool pump calculator. While my HTML onchange function is working perfectly, I am struggling with passing the active Div value into my Javascript If Else statement and updating the outputs accordingly for each case of E ...

javascriptjqueryhtmlif-statementonchange

Steps for creating a hovering effect that overlays a circular image by 50%

I'm trying to implement a feature on my website where an overlay appears when a user hovers over their display picture. However, I'm facing a challenge as I want the overlay to only cover half of the circle, not the entire photo. After research ...

javascriptjqueryhtmlcss

Confusion between Codeigniter's URL and base_url() function

$config['base_url'] = 'localhost/project'; <link href="<?= base_url(); ?>/css/bootstrap.min.css" rel="stylesheet"> An issue arises with the CSS not loading on the view due to a double '/' in the URL. This occur ...

phphtmlcsscodeigniter

Selecting radio buttons across multiple div classes

I've been struggling to programmatically select specific radio buttons on a webpage. My goal is to automatically choose the second option in each group of radio buttons, but I'm getting lost in the syntax. Unlike most examples I've found on ...

javascriptjqueryhtmlcss

Tips for getting links to wrap or scroll within a column element in Angular

In my row element with two columns, I am facing an issue where the first column sometimes overlaps the second column due to a very long link in the problem.problem_description section. I want to find a way to have long links wrap or be scrollable. However, ...

htmlangulartwitter-bootstrapangular-ui-bootstrap

Tips on incorporating a parent selector into a relative CSS selector in Selenium with Python

Let me do my best to articulate the issue. This inquiry pertains to selenium in Python. Take a look at this example: for row in driver.find_elements(By.CSS_SELECTOR, "div[style='overflow: hidden;'] > div > div:nth-child(3)"): ...

pythoncssseleniumxpathcss-selectors

Eliminating Google Adsense from Blog Posts

In each of my posts, I manually insert one Adsense unit. Here is the code: <div id="toppostad" style="float: left"> Adsense code </div> Initially, I assigned an id to the div when placing the code with the intention of using display:none; to ...

htmlcssbloggeradsense

Error encountered when using Symfony 2 command line interface

Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...

csssymfony

Obtain HTML tags from RSS CDATA section

Is there a way to extract HTML tags from a CDATA tag in an RSS feed? I have utilized a basic jQuery function to retrieve the JSON object from the RSS, below is my code: $.get("someURL", function(data) { console.log('InGet'); ...

jqueryhtmljsonxml-parsingrss

Include some extra margin or padding to ensure the section is visible below the fixed navbar

I have implemented smooth scrolling using scroll-behavior: smooth in my CSS. The navigation bar is sticky, and when I click on a menu item, it takes me to the designated section. The issue I am facing is that the section goes under the sticky navbar. I wo ...

htmlcssbootstrap-4

Verifying StartDate and EndDate using AngularJS and Bootstrap Datepicker

My HTML Coding <form name="myForm"> <div class="row"> <div class="col-md-2"> <input data-ng-model="Data.StartDate" type="text" id="startDate" name="startDate" class="form-control" data-da ...

javascriptangularjshtmlangular-ui-bootstrapbootstrap-datepicker

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

I'm currently developing a React App that functions as a calendar, allowing users to click on specific days displayed as large squares to view information for that day. For accessibility purposes, I initially considered using <button> elements b ...

javascripthtmlcssreactjsaccessibility

How can we align images above one another in a responsive manner using Bootstrap 3?

Looking for assistance with aligning and overlapping images on top of another image in Bootstrap while maintaining responsiveness. I've attempted the following: HTML: <div class="container"> <div class="row"> <div class="col-lg-12"> ...

csstwitter-bootstrap

Creating dynamic web content using PHP and JavaScript

I stumbled upon a tutorial on the PHP.net website within the "PHP and HTML" manual which includes an example titled Generating JavaScript with PHP. Currently, I am experimenting with a basic demo of this concept on my own to grasp the process before attem ...

phpjavascripthtmljson

Center-aligned Circles via CSS with the number of circles controlled by AngularJS

Here is what the layout looks like: https://i.sstatic.net/Cz0CT.png Here is what I would like to have: https://i.sstatic.net/WbkY2.png Or if the getNumber function returns more, for example: https://i.sstatic.net/ViBXh.png (so essentially the circles ...

angularjscssalignmentcenter