How to add svg end of a progress bar manipuleted by javascript

I am coding a porgress bar and this progress is increasing or decreasing according to the degree from javascript. It's okay if the progress bar doesn't work, but I want to add a triangle svg to the end of this bar and make it arrow shaped.

The progress bar I made looks like this:
my ipmpementation

but I want it to look like this:
how i want to make

The html structure of the progress bar is as follows:

<div class="progress-container">
     <div class="progress__fill"></div>
</div>

Here is the progress bar javascript code:

<script >
    function updateProgressBar(progressBar) {
        progressBar.querySelector(".progress__fill").style.width = VALUE;
    }
const myProgressBar = document.querySelector(".progress-container");
updateProgressBar(myProgressBar); </script>

As you can see, it changes according to the progress bar value variable, so I didn't know how to add the svg in the form of triangle at the end.

to answer exactly your question, check snippet.
Now you have another way to do that with css triangle in after pseudo class

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let VALUE = '50%';

function updateProgressBar(progressBar) {
  progressBar.querySelector(".progress__fill").style.width = VALUE;
}
const myProgressBar = document.querySelector(".progress-container");
updateProgressBar(myProgressBar);

<!-- language: lang-css -->

.progress-container {
  width: 100%;
  height: 24px;
  background-color: darkgray;
  border-radius: 10px;
}

.progress__fill {
  float: left;
  background-color: red;
  width: 25%;
  height: 100%;
  border-radius: 10px;
}

.progress-container svg {
  float: left;
  width: 48px;
  height: 48px;
  margin-top: -12px;
  margin-left: -10px;
}

<!-- language: lang-html -->

<br>
<div class="progress-container">
  <div class="progress__fill"></div>
  <svg id="svgTriangle" fill="#ff0000" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path d="M 0,48 V 0 l 48,24 z" />
    </svg>
</div>

<!-- end snippet -->