JS - Seçili Bölüme Style Ekleme Hakkında

Merhaba Arkadaşlar,
Elimde bir proje var, proje içerisinde bir tab ayarlanmış. Tabta bulunan sekmenin altına şu şekilde bir div atılmış.

<div class="highlight" style="left: 1px; width: 191px;"></div>

Burada ben hangi sekmeyi seçersem yukarıda ki kodda yer alan left değeri değişiyor ve seçtiğim sekmenin altına kayıyor. Fakat ben bunu progress bar gibi yapmak istiyorum. Yani left değeri 1px olarak sabit kalsın ama width değeri benim seçtiğim sekmeye göre ileri geri gelsin istiyorum. Bu işlemi yapabilmek için javascriptte nasıl bir uygulama yapmak gerekiyor.

Tab sekmelerine ait örnek bir kod aşağıdaki gibidir.

<div name="ornekname" selected="" theme="light" class="ornekclass" role="tab" tabindex="0" aria-selected="true" id="ornekid" aria-controls="ornekcontrols">Tab Sekme 1</div>

Bu arada yukarıda ki kod satırı içerisinde yer alan selected="" özelliği seçtiğim sekmeye geliyor.

Yardımcı olanlara şimdiden çok teşekkür ederim.

Yazdığından anladığım progressbar soldan başlayıp seçili sekmenin hızasına kadar dolu olarak gelecek. Yani soldan değil sağdan hizalama gerekli. Örneğin 4 sekme var 4. sekmenin başına kadar progress bar dolu olacaksa (4.sekmedeysen) %75 dolu yani sağdan %25 boş olmalı.
Yazdığımı sağlayabilmek için javascript kodları içinden left değerini değiştiren kodu bulup left değil right değeri atamasını sağlamalısın.(Az bir ekleme daha gerekebilir.) Ardından highlight classının içeriğini değiştirip progressbar görünümü vermelisin.

hocam sizin kodlarda duzenleme yapmak lazim ama yine de fikir sahibi olmaniz icin soyle bir sey hazirladim eger istediginiz seyi de dogru anladiysam
https://jsfiddle.net/q4fnu5j9/

Çok teşekkür ederim hocam elinize sağlık. Ben sorunu çözemediğim için sıfırdan bir tab yaptım bu şekilde çözdüm problemi.