Центрирование текущего div на индикаторе начальной загрузки на мобильном устройстве

Question

У меня на сайте есть индикатор начальной загрузки, который «загорается» в зависимости от того, на какой странице мы находимся (заполняет многостраничную форму).Может быть проще увидеть пример, поэтому я сделал это:

Пример

Проблема в том, что на мобильном телефоне индикатор выполнения исчезает с экрана.Я думаю, что я хотел бы сделать так, чтобы текущая страница, на которой я нахожусь, была отцентрирована, и полоса могла исчезать с экрана влево или вправо, пока текущая страница (на полосе) находится в центре экрана.

Есть ли способ сделать это?

В случае, если это поможет, вот фактический код:

{% if app.request.get('_route') == 'orders_add_fax' %}
    {%   set page = 0 %}
{% elseif app.request.get('_route') == 'orders_add_patients' %}
    {%   set page = 1 %}
{% elseif app.request.get('_route') == 'orders_add_payment' %}
    {%   set page = 2 %}
{% elseif app.request.get('_route') == 'orders_add_clients' %}
    {%   set page = 3 %}
{% elseif app.request.get('_route') == 'orders_add_employees' %}
    {%   set page = 4 %}
{% elseif app.request.get('_route') == 'orders_add_dates' %}
    {%   set page = 5 %}
{% elseif app.request.get('_route') == 'orders_add_notes' %}
    {%   set page = 6 %}
{% elseif app.request.get('_route') == 'orders_add_summary' %}
    {%   set page = 7 %}
{%  endif %}
<div class="progress" style="height:30px;width:570px;">
    <div class="progress-bar bg-{% if page >= 0 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%">
        <a href="{{ path('orders_add_fax') }}" class="text-white">Fax</a>
    </div>
    <div class="progress-bar bg-{% if page >= 1 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 1 %}
            <a href="{{ path('orders_add_patients') }}" class="text-white">Patients</a>
        {% else %}
            Patients
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 2 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 2 %}
            <a href="{{ path('orders_add_payment') }}" class="text-white">Payment</a>
        {% else %}
            Payment
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 3 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {%  if page >= 3 %}
            <a href="{{ path('orders_add_clients') }}" class="text-white">Client(s)</a>
        {%  else %}
            Client(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 4 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 4 %}
            <a href="{{ path('orders_add_phleb') }}" class="text-white">Phleb(s)</a>
        {% else %}
            Employee(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 5 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 5 %}
            <a href="{{ path('orders_add_dates') }}" class="text-white">Date(s)</a>
        {% else %}
            Date(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 6 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 6 %}
            <a href="{{ path('orders_add_notes') }}" class="text-white">Note(s)</a>
        {% else %}
            Note(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 7 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        Summary
    </div>
</div>

Answer 1

Возможно, это не лучшая попытка, но вот я попробую использовать flex, может быть, вы можете использовать что-то подобное?

http://jsfiddle.net/aq9Laaew/253301/

  .flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

  .flex-container > div {
  background-color: #f1f1f1;
  width: 100px!important;
  text-align: center;
  line-height: 75px;
 }

 .progress {
 height: auto;
 background-color: transparent;

}