Progress Bar with tabs

index.html

<h1>Progress Bars (with tabs)</h1>
<p>According text value</p>
<div class="tab-container">
  <div class="tab active">
    <h2 class='tab-title'>Tab 1</h2>
    <ul class="container">
      <li class="loading"><span class="progress">10%</span></li>
      <li class="loading"><span class="progress">20%</span></li>
      <li class="loading"><span class="progress">30%</span></li>
      <li class="loading"><span class="progress">40%</span></li>
    </ul>
  </div>
  <div class="tab">
    <h2 class='tab-title'>Tab 2</h2>
    <ul class="container">
      <li class="loading"><span class="progress">0%</span></li>
      <li class="loading"><span class="progress">15%</span></li>
      <li class="loading"><span class="progress">48%</span></li>
      <li class="loading"><span class="progress">77%</span></li>
    </ul>
  </div>
    <div class="tab">
    <h2 class='tab-title'>Tab 3</h2>
    <ul class="container">
      <li class="loading"><span class="progress">29%</span></li>
      <li class="loading"><span class="progress">145%</span></li>
      <li class="loading"><span class="progress">0%</span></li>
      <li class="loading"><span class="progress">47%</span></li>
    </ul>
  </div>
    <div class="tab">
    <h2 class='tab-title'>Tab 4</h2>
    <ul class="container">
      <li class="loading"><span class="progress">219%</span></li>
      <li class="loading"><span class="progress">15%</span></li>
      <li class="loading"><span class="progress">1%</span></li>
      <li class="loading"><span class="progress">49%</span></li>
    </ul>
  </div>
</div>

progress-bar-with-tabs.markdown

Progress Bar with tabs

Set width according bar title

A Pen by Marcelo Glacial on CodePen.

License.

script.js

// Tab switcher
function tabSwitcher() {
  // set variables
  let tabContainer = ".tab";
  let tabTitle = ".tab-title";
  let tabTitleWidth = $(tabTitle).width();

  // Organize Tabs
  let tabNumber = $(tabContainer).length;
  for (i = 0; i < tabNumber; i++) {
    $(tabContainer + ":nth-child(" + (i + 1) + ") " + tabTitle).css({
      "margin-left": tabTitleWidth * i
    });
  }

  // Active tab on click
  $(tabTitle).on("click", function() {
    progressBar();
    $(this)
      .parent()
      .siblings()
      .removeClass("active");
    $(this)
      .parent()
      .addClass("active");
  });
}
// Progress bar
function progressBar(event) {
  // When is clicked
  if (event) {
    event.preventDefault();
  }

  // select each progress bar
  $(".progress").each(function() {
    // set variables
    let barText = $(this).text();
    let barWidth = barText.replace("%", "");

    // exceptions
    if (barWidth < 18) {
      // shorter bar
      $(this)
        .text("")
        .parent()
        .append(barText)
        .css({ "padding-left": "calc(" + barWidth + "% + 5px)" });
    } else if (barWidth > 100) {
      // longer bar
      barWidth = 100;
    }

    // set progress width
    $(this).css({ width: barWidth + "%" });
  });
}

// sLoad when the page is ready.
$(document).ready(function() {
  tabSwitcher();
  progressBar();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.less

@grey: #f1f1f1;
@black: #000;
@white: #fff;
@tab-title-width: 100px;

body {
  padding: 40px;
  h1 {
    padding: 0;
    margin: 0;
  }
  p {
    padding-bottom: 15px;
  }
  .tab-container {
    position: relative;
    min-width: 200px;
    .tab {
      position: absolute;
      width: 100%;
      max-width: 500px;
      z-index: 0;
      margin-top: 54px;
      &.active {
        z-index: 1;
      }
      .tab-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: @tab-title-width;
        background: @grey;
        margin: 0;
        border: solid 2px @black;
        position: absolute;
        top: -54px;
        border-radius: 10px 10px 0 0;
        &:after {
          display: block;
          content: "";
          position: absolute;
          left: 0;
          bottom: -2px;
          width: @tab-title-width;
          height: 10px;
          background: @grey;
          z-index: 100;
        }
        &:hover {
          cursor:pointer;
          z-index: 100;
        }
      }
      .container {
        list-style: none;
        padding: 0;
        background: @grey;
        padding: 25px 20px;
        margin: -2px 0 0 0;
        border: solid 2px @black;
        border-radius: 0 10px 10px 10px;
        .loading {
          &:not(:last-child) {
            margin-bottom: 20px;
          }
          margin: 0;
          color: @white;
          border: solid 2px #000;
          border-radius: 10px;
          color: @black;
          position: relative;
          z-index: 10;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          background: @white;

          .progress {
            display: flex;
            background: red;
            height: 100%;
            align-items: center;
            justify-content: center;
            width: 0%;
            border-radius: 8px;
            transition: all 0.3s ease-in-out;
            color: @white;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
          }
        }
      }
    }
  }
}