How can I dynamically change the color of a timeline’s progress bar based on the provided percentage values using HTML, CSS, and JavaScript?

I’m currently working on a timeline that represents progress, and I have a set of data points with corresponding percentage values. The timeline is styled using HTML and CSS, with a :before pseudo-element serving as the progress bar. Each data point is represented by a .timeline-item element.

I want to dynamically fill the color of this progress bar based on the value provided in the data.

I’m looking for guidance on how to dynamically change the color of the progress bar in the timeline based on the percentage values provided in the data. What would be the best approach to achieve this?

Code Snippet

const timelineData = [
  {percentage: '0%', date: '1-1-2020', title: 'Mussum ipsum cacilds 1', content: 'Content 1' },
  {percentage: '20%', date: '2-1-2020', title: 'Mussum ipsum cacilds 2', content: 'Content 2' },
  {percentage: '40%', date: '3-1-2020', title: 'Mussum ipsum cacilds 3', content: 'Content 3' },
  {percentage: '60%', date: '4-1-2020', title: 'Mussum ipsum cacilds 4', content: 'Content 4' },
  {percentage: '80%', date: '5-1-2020', title: 'Mussum ipsum cacilds 5', content: 'Content 5' },
    ];

  function generateTimelineItems() {
  const timelineContainer = document.getElementById('custom-timeline');

  timelineData.forEach(item => {
  const listItem = document.createElement('li');
  listItem.className = 'timeline-item';

  //  Convert percentage to a numeric value
  const percentage = parseInt(item.percentage, 10);

  listItem.style.width = `${percentage}%`;

  const progressBar = document.createElement('div');
  progressBar.className = 'progress-bar';
  progressBar.style.width = `${percentage}%`;

  const panel = document.createElement('div');
  panel.className = 'timeline-panel';
  panel.innerHTML = `
                <div class="timeline-heading">
                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> ${item.date}</small></p>
                </div>

                <p class="text-center"><strong>${item.percentage}</strong></p>
            `;
  listItem.appendChild(panel);

  timelineContainer.appendChild(listItem);
      });
    }

  generateTimelineItems();

.timeline,
    .timeline-horizontal {
  list-style: none;
  padding: 20px;
  position: relative;
  width: 100%;

    }

    .timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 10px;
  background-color: transparent;
  left: 50%;
  margin-left: -5px;
  border: 10px solid #ccc;
  Set the color for the empty part of the progress bar */
  border-radius: 5px;
    }



    .timeline .timeline-item {
  margin-bottom: 20px;
  position: relative;

    }

    .timeline .timeline-item:before,
    .timeline .timeline-item:after {
  content: "";
  display: table;
    }

    .timeline .timeline-item:after {
  clear: both;
    }

    .timeline .timeline-item .timeline-panel {
  position: relative;
  max-width: 150px;
  width: 150px;
  border: 1px solid #c0c0c0;
  background: #ffffff;
  border-radius: 2px;
  padding: 20px;
      -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    }

    .timeline .timeline-item .timeline-panel:before {
  position: absolute;
  top: 26px;
  display: inline-block;
  border-top: 16px solid transparent;
  border-left: 16px solid #c0c0c0;
  border-right: 0 solid #c0c0c0;
  border-bottom: 16px solid transparent;
  content: " ";
    }

    .timeline-horizontal {
  list-style: none;
  position: relative;
  padding: 20px 0px 20px 0px;
  display: inline-block;
    }

    .timeline-horizontal:before {
  height: 3px;
  top: auto;
  bottom: 26px;
  left: 56px;
  right: 0;
  width: 100%;
  margin-bottom: 20px;
    }

    .timeline-horizontal .timeline-item {
  display: table-cell;
  height: 280px;
  float: none !important;
  padding-left: 0px;
  padding-right: 0px;
  margin: 0 auto;
  vertical-align: bottom;
    }

    .timeline-horizontal .timeline-item .timeline-panel {
  top: auto;
  bottom: 64px;
  display: inline-block;
  float: none !important;
  left: 0 !important;
  right: 0 !important;
  width: 100%; */
  width: 320px;
  margin-bottom: 5px;

    }

    .timeline-horizontal .timeline-item .timeline-panel:before {
  top: auto;
  bottom: -16px;
  left: 28px !important;
  right: auto;
  border-right: 16px solid transparent !important;
  border-top: 16px solid #c0c0c0 !important;
  border-bottom: 0 solid #c0c0c0 !important;
  border-left: 16px solid transparent !important;
    }

    .timeline-horizontal .timeline-item:before,
    .timeline-horizontal .timeline-item:after {
  display: none;
    }

    .timeline-horizontal .timeline-item .timeline-badge {
  top: auto;
  bottom: 0px;
  left: 43px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div style="display: inline-block; width: 100%; overflow-y: auto">
        <ul class="timeline timeline-horizontal" id="custom-timeline"></ul>
      </div>
    </div>
  </div>
</div>