How to create a centered inline list in framework7

Hello guys, please i want to create an lnline list of item to represent progress of the user navigating through pages.

<div class="list">
   <center>
          <ul>
               <li class="progress-one progress-active"></li>
                <li class="progress-two"></li>
                <li class="progress-three"></li>
          </ul>
   </center>
</div>

.progress-one {
position: absolute;
width: 20px;
height: 7px;
/*left: 163px;*/
background: #C4C4C4; 
border-radius: 20px;
}

.progress-two{
position: absolute;
width: 20px;
height: 7px;
/*left: 181px;*/
background: #C4C4C4;
border-radius: 20px;

 }

  .progress-three{
position: absolute;
width: 20px;
height: 7px;
/*left: 199px;*/
background: #C4C4C4;
border-radius: 20px;
  }

I want to acheive this

You should use swiper component with pagination

1 Like