Balls are filled according to the status of the page

Question

I am developing a form where I have three pages and consequently three top balls, each representing a page. The form logic is already completed where each page is displayed according to the parameter variable with a data-ng-show. I need that according to the page that the user is filling the corresponding ball change the background. I managed to make the balls with CSS and put the corresponding icons in them but I’m not able to make it responsive (I need it to be responsive, using Bootstrap) and I still need a bar connecting these three balls that fill according to the page.

Follow the code I arrived:

.bola {
    border-radius: 50%;
    display: inline-block;
    height: 60px;
    width: 60px;
    border: 1px solid #000;
    background-color: #f0f8ff;
    float: right;
    margin: 0 15px;
}

<div class="bola"><img class="img" src="/sites/xxx/SiteAssets/images/imgsStatus/medicamento.png"></div>