Balls are filled according to the status of the page

I'm developing a form where I have three pages and consequently three top balls, each representing a page. The form logic is now complete where each page is displayed according to the variable parameter with a data-ng-show. I need that according to the page that the user is filling the corresponding ball change the background. I was able to make the balls with CSS and put the corresponding icons on them but I'm not able to make it responsive (I need it to be responsive, so I'm using Bootstrap) and I still need a bar linking those three balls that fill up according to the page .

Here is the code I came up with:

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