title: Changing color of progress bar when it reaches 100%
body: <p>I have a rounded progress bar that goes for a minute, and starts over.
  Right now, the background is grey and the progress bar is blue. I need when it reaches 100%, everything is blue, and then when it starts over, the blue stays as a background and the progress bar becomes grey. When it reaches 100%, same thing over again, background is gray and progress bar is blue. Everytime it starts, color changes.
  Here is my JSFiddle
  <a href="https://jsfiddle.net/BrsJsk/gdLu77dc/" rel="nofollow noreferrer">https://jsfiddle.net/BrsJsk/gdLu77dc/</a></p>
  
  <pre><code>div[data-progress] {
    box-sizing: border-box;
    position: relative;
    height: 200px;
    width: 200px;
    background: #c8c9cb;
    border-radius: 50%;
    transition: all 1s;
    overflow: hidden;
  }
  
  .counter {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    text-align: center;
    line-height: 200px;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
  }
  
  div &gt; div {
    position: absolute;
    height: 50%;
    width: 50%;
    background: inherit;
    border-radius: 0%;
  }
  
  .quad1,
  .quad2 {
    left: 50%;
    transform-origin: left bottom;
  }
  
  .quad3,
  .quad4 {
    left: 0%;
    transform-origin: right top;
  }
  
  .quad1,
  .quad4 {
    top: 0%;
  }
  
  .quad2,
  .quad3 {
    top: 50%;
  }
  
  .quad1,
  .quad3 {
    transform: skew(0deg);
    /* invisible at -90deg */
  }
  
  .quad2,
  .quad4 {
    transform: skewY(0deg);
    /* invisible at 90deg */
  }
  
  
  /* Just for demo */
  
  div[data-progress] {
    margin: 40px auto;
  }
  
  &lt;div data-progress="0"&gt;
          &lt;div class="quad1"&gt;&lt;/div&gt;
          &lt;div class="quad2"&gt;&lt;/div&gt;
          &lt;div class="quad3"&gt;&lt;/div&gt;
          &lt;div class="quad4"&gt;&lt;/div&gt;
          &lt;div class='counter'&gt;&lt;/div&gt;
        &lt;/div&gt;
  
  {
        var progressbar = document.querySelector('div[data-progress]'),
          quad1 = document.querySelector('.quad1'),
          quad2 = document.querySelector('.quad2'),
          quad3 = document.querySelector('.quad3'),
          quad4 = document.querySelector('.quad4'),
          counter = document.querySelector('.counter');
  
  
        var progInc = setInterval(incrementProg, 600);
  
        function incrementProg() {
          progress = parseInt(progressbar.getAttribute('data-progress'));
          progress = ((progress + 1) % 100);
          if (progress === 0) {
            quad1.setAttribute('style', 'transform: skew(0deg)');
            quad2.setAttribute('style', 'transform: skewY(0deg)');
            quad3.setAttribute('style', 'transform: skew(0deg)');
            quad4.setAttribute('style', 'transform: skewY(0deg)');
          }
          progressbar.setAttribute('data-progress', progress); //set value to attribute
          counter.textContent = 100 - parseInt(progress, 10); // set countdown timer's value
          setPie(progress); // call the paint progress bar function based on progress value
        }
  
        function setPie(progress) {
          /* If progress is less than 25, modify skew angle the first quadrant */
          if (progress &lt;= 25) {
            quad1.setAttribute('style', 'transform: skew(' + progress * (-90 / 25) + 'deg)');
            progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
  
          }
  
          /* Between 25-50, hide 1st quadrant + modify skew angle of 2nd quadrant */
          else if (progress &gt; 25 &amp;&amp; progress &lt;= 50) {
            quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
            quad2.setAttribute('style', 'transform: skewY(' + (progress - 25) * (90 / 25) + 'deg)');
            progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
          }
  
          /* Between 50-75, hide first 2 quadrants + modify skew angle of 3rd quadrant */
          else if (progress &gt; 50 &amp;&amp; progress &lt;= 75) {
            quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
            quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
            quad3.setAttribute('style', 'transform: skew(' + (progress - 50) * (-90 / 25) + 'deg)');
            progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
          }
  
          /* Similar to above for value between 75-100 */
          else if (progress &gt; 75 &amp;&amp; progress &lt; 100) {
            quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
            quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
            quad3.setAttribute('style', 'transform: skew(-90deg)'); // hides 3rd completely
            quad4.setAttribute('style', 'transform: skewY(' + (progress - 75) * (90 / 25) + 'deg)');
            progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
          }
        }
      }
  </code></pre>
  
  <p>And here is the code for changing colors but its not working.</p>
  
  <pre><code>var barFull = 0;
        if (barFull = 1) {
          progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #c8c9cb');
           quad1.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2'); 
            quad2.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2'); 
            quad3.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
            quad4.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
        }
        else {
          progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
           quad1.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #c8c9cb'); 
            quad2.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #c8c9cb'); 
            quad3.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #c8c9cb'); 
            quad4.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #c8c9cb');
        }
        if (progress == 100) {
          barFull = 1;
        }  
        else {
          barFull = 0;
        }
  </code></pre>