[Solved] Progress Bar text

by


Use the CSS ::after selector and attr() function for this. The ::after selector appends text to the end of the element, while attr() returns the value of a given attribute.

function update_progressbar() {
  var opt1 = parseInt($('option:selected', $('#FirstQOne')).val());
  var opt2 = parseInt($('option:selected', $('#FirstQTwo')).val());
  var opt3 = parseInt($('option:selected', $('#FirstQThree')).val());
  var opt4 = parseInt($('option:selected', $('#FirstQFour')).val());
  var opt5 = parseInt($('option:selected', $('#FirstQFive')).val());
  var opt6 = parseInt($('option:selected', $('#FirstQSix')).val());
  var opt7 = parseInt($('option:selected', $('#FirstQSeven')).val());
  var opt8 = parseInt($('option:selected', $('#FirstQEight')).val());

  var total = isNaN(opt1) ? 0 : opt1;
  if (!isNaN(opt2)) {
    total += opt2;
  }
  if (!isNaN(opt3)) {
    total += opt3;
  }
  if (!isNaN(opt4)) {
    total += opt4;
  }
  if (!isNaN(opt5)) {
    total += opt5;
  }
  if (!isNaN(opt6)) {
    total += opt6;
  }
  if (!isNaN(opt7)) {
    total += opt7;
  }
  if (!isNaN(opt8)) {
    total += opt8;
  }
  $("#progressBar").prop('value', total)
}

$('#FirstQOne').on('change', update_progressbar);
$('#FirstQTwo').on('change', update_progressbar);
$('#FirstQThree').on('change', update_progressbar);
$('#FirstQFour').on('change', update_progressbar);
$('#FirstQFive').on('change', update_progressbar);
$('#FirstQSix').on('change', update_progressbar);
$('#FirstQSeven').on('change', update_progressbar);
$('#FirstQEight').on('change', update_progressbar);
progress {
  text-align: center;
}

progress:after {
  content: attr(value)'%';
  position: relative;
  top: -1.15em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="head">

  <br>
  <div id="myProgress">
    <progress id='progressBar' max='100' value="0" style="background-color: red; font-family: Impact, Charcoal, sans-serif;"></progress>
  </div>
  <!-- <div id="myProgress">
	  				<progress max="100"><div id="myBar" style="font-family: Impact, Charcoal, sans-serif;""><strong>0%</strong></div>
				</div> -->
  <br>

</div>


<body>
  <br>

  <main class="mainarea">

    <br>
    <br>
    <!-- **********************************************1111111111111111111111111********************************************************-->
    <div class="control1">
      <div id="criticalSecurityControlForms">
        <form action="/action_page.php">
          <select id="FirstQOne" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="15">Implemented on All Systems</option>
                <option class="AllAndAuto" value="20">Implemented and Automated on All Systems</option>
            </select>
        </form>
      </div>

      <br>

      <div id="criticalSecurityControlForms">
        <form action="/action_page.php">
          <select id="FirstQTwo" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="15">Implemented on All Systems</option>
                <option class="AllAndAuto" value="20">Implemented and Automated on All Systems</option>
            </select>
        </form>
      </div>
      <br>
    </div>

1

solved Progress Bar text