A Pen by Stefan Judis.

HTML5-progress-element-half-circle.markdown

HTML5 progress element half circle

A Pen by Stefan Judis on CodePen.

License.

index.html

<div id="progressContainer">
  <h1>Fun with html progress element</h1>
  <progress id="progress" value="0" max="100"></progress>
  <p>Wait until it's green, dude!</p>
</div>

script.js

;( function( document ) {
  var progress = document.getElementById( 'progress' );
  
  setInterval( function() {
    var oldValue = +progress.getAttribute( 'value' );
    
    if ( oldValue < 100 ) {
      var newValue = oldValue + 1;

      progress.setAttribute( 'value', newValue );
    }
  }, 100 );
} )( document );

style.scss

@import "compass";
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

#progressContainer {
  text-align: center;
  position: relative;
  
  &:before, &:after {
    position: absolute;
    top: 80%;
    width: 1em;
    height: 1em;
  }
  
  &:before {
    content: '0%';
    left: calc( 50% - 110px );
  }
  
  &:after {
    content: '100%';
    right: calc( 50% - 105px );
  }
}
progress {
  margin: 20px;
  width: 200px;
  height: 100px;
  position: relative;
  
  border-bottom: 1px solid #aaa;
  
  -webkit-appearance: none;
    
  &[value="100"] {
    &:before {
      position: absolute;
      content: "Loaded!!!";
      top: 100%;
      left: 50%;
      width: 100px;
      height: 10px;
    }
  }
  
  &::-webkit-progress-bar {
    background: white;
  }
  
  &::-webkit-progress-value {  
    position: absolute;

    background-color: transparent;
    width: 200px !important;
    height: 100px !important;
    overflow: hidden;
    
    &:before {
      content: '';
      width: 200px !important;
      height: 100px !important;
      border-radius: 0 0 200px 200px;
      position: absolute;
      left: 0;
      top: 0;
      background: blue;
      
      @include box-shadow( inset 0 -25px 50px rgba(60, 60, 60, 0.5));
      @include simple-transform( 1, 0deg, 0, 100%, 0, 0, 50%, 0% );
    }
  }
}

@for $i from 0 through 100 {
  progress[value="#{$i}"]::-webkit-progress-value:before {
    @include simple-transform( 1, #{ 180 / 100 * $i }deg, 0, 100%, 0, 0, 50%, 100% );
    background: rgba( 220 - ( 220 / 100 * $i ), $i * 180 / 100, 0, 1.0);
  }
}