A Pen by Scott Marshall.

HTML-5-PROGRESS-TUTORIAL.markdown

HTML 5 PROGRESS TUTORIAL

Here is a quick tutorial on the new HTML 5 Progress Element enjoy!

A Pen by Scott Marshall on CodePen.

License.

index.html

<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!--Main Container-->
<div id="container">
  <!--Title-->
  <h1 class="title">HTML 5 Progress Elements</h1>
  <!--Progress Bar Container-->
  <div class="progress">
    <!--Individual Progress Bars-->
    <progress max="100" value="5"></progress>
    <progress max="100" value="10"></progress>
    <progress max="100" value="15"></progress>
    <progress max="100" value="20"></progress>
    <progress max="100" value="25"></progress>
    <progress max="100" value="30"></progress>
    <progress max="100" value="35"></progress>
    <progress max="100" value="40"></progress>
    <progress max="100" value="45"></progress>
    <progress max="100" value="50"></progress>
    <progress max="100" value="55"></progress>
    <progress max="100" value="60"></progress>
    <progress max="100" value="65"></progress>
    <progress max="100" value="70"></progress>
    <progress max="100" value="75"></progress>
    <progress max="100" value="80"></progress>
    <progress max="100" value="85"></progress>
    <progress max="100" value="90"></progress>
    <progress max="100" value="95"></progress>
    <progress max="100" value="100"></progress>
  </div>
  <!--Tutorial Information-->
  <div class="description">
    <h1>Html 5 Progress Elements</h1>
    
    <p>A progress element is used to determine completion of a progress. A progress element must have an opening tag <span class="tag">< progress > </span>and a closing tag <span class="tag">< <span class="small">/</span>progress ></p>
     <p class="intro">Similar to an range input you are able to set a value and max attribute. Ex:     </p>
    
    <p class="ex">< progress max <span class="big">=</span> "100" value <span class="big">=</span> "5" ></progress ></p>
    <p>Now go ahead and start having fun styling these new html elements using there pseudo's</p>
     
    <!--Demo Box-->
    <div class="box">
      <h2 class="comment">/* the main bar, ex: my indented background. */<h2>
      <h2>progress[value]::-webkit-progress-bar {<br>
      }</h2>
      <h2 class="comment2">/* the bar fill, ex: my teal color. */<h2>
      <h2>progress[value]::-webkit-progress-value {<br>
      }</h2>
   </div>     
  </div>
        <h3>A quick Codepen tutorial on styling progress elements in Chrome by: Scott Marshall</h3>
</div>

style.scss

@import "compass";
/*****************************************
BODY / HTML
*****************************************/
body{
  /* IE10 Consumer Preview */ 
  background-image: -ms-radial-gradient(center, circle farthest-corner, #474759 0%, #22222B 100%);
  /* Mozilla Firefox */ 
  background-image: -moz-radial-gradient(center, circle farthest-corner, #474759 0%, #22222B 100%);
  /* Opera */ 
  background-image: -o-radial-gradient(center, circle farthest-corner, #474759 0%, #22222B 100%);
  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #474759), color-stop(1, #22222B));
  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-radial-gradient(center, circle farthest-corner, #474759 0%, #22222B 100%);
  /* W3C Markup, IE10 Release Preview */ 
  background-image: radial-gradient(circle farthest-corner at center, #474759 0%, #22222B 100%);
}

/*****************************************
MAIN CONTAINER
*****************************************/
#container{
  width:1000px;
  margin:0 auto;
  margin-top:30px;
  padding-bottom:100px;
}

/*****************************************
PROGRESS CONTAINER
*****************************************/
.progress{
  width:50%;
  float:left;
}

/*****************************************
PROGRESS ELEMENTS
*****************************************/
progress{
  width:100%;
  height:5px;
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
}

/*****************************************
PROGRESS ELEMENT - MAIN BAR
*****************************************/
progress[value]::-webkit-progress-bar{
  box-shadow: inset 4px 6px 10px -4px rgba(0,0,0,0.3), 0 1px 1px -1px rgba(255,255,255,0.3);
	background: rgba(0,0,0,0.2);
  border-radius:30px;
  border:1px solid rgba(0,0,0,0.4);
}

/*****************************************
PROGRESS ELEMENT - FILL BAR
*****************************************/
progress[value]::-webkit-progress-value{
  border-radius:30px;
  background:rgba(0,245,255,0.9);
  box-shadow:rgba(0,245,255,0.3) 0px 0px 10px;
  border:1px solid rgba(0,0,0,0.4);
  -webkit-animation:load 4s;
  -moz-animation:load 4s;
  -o-animation:load 4s;
  -ms-animation:load 4s;
  animation:load 4s;
  -webkit-transition:ease 1s;
  -moz-transition:ease 1s;
  -o-transition:ease 1s;
  -ms-transition:ease 1s;
  transition:ease 1s;
}

/*****************************************
PROGRESS LOADING ANIMATION
*****************************************/
@-webkit-keyframes load{
  0%{
     width:0px;
  }
}

@-moz-keyframes load{
  0%{
     width:0px;
  }
}

@-o-keyframes load{
  0%{
     width:0px;
  }
}

@-ms-keyframes load{
  0%{
     width:0px;
  }
}

@keyframes load{
  0%{
     width:0px;
  }
}

/*****************************************
TUTORIAL INFORMATION
*****************************************/
.description{
  float:left;
  width:40%;
  margin-left:50px;
  h1{
    color:#FFF;
    text-shadow:#000 0px 1px 2px;
    font:20px Oswald;
    text-transform:uppercase;
    margin:0px;
    margin-top:5px;
  }  
  p{
    color:#FFF;
    text-shadow:#000 0px 1px 2px;
    font:15px Oswald;
    margin-bottom:5px;
    line-height:20px;
  }
}

/*****************************************
TYPOGRAPHY CLASSES
*****************************************/

/*****************************************
MAIN TITLE
*****************************************/
.title{
  color:#FFF;
  font:70px Poiret One;
  text-transform:uppercase;
  text-shadow:#000 0px 2px 10px;
  -webkit-box-reflect: below -15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
}

/*****************************************
TAG CLASS
*****************************************/
.tag{
  color:#8F8F8F;
}

/*****************************************
SMALL SLASH
*****************************************/
.small{
  font-size:12px;
}

/*****************************************
EXAMPLE TEXT
*****************************************/
.ex{
  font:16px Oswald !important;
  color:#8F8F8F !important;
  margin:0px;
}

/*****************************************
LARGE TEXT
*****************************************/
.big{
  font-size:21px;
}

/*****************************************
ATTR INTRO
*****************************************/
.intro{
  margin-bottom:-5px !important;
}

/*****************************************
HTML EXAMPLE BOX
*****************************************/
.box{
  width:98%;
  background:#222;
  box-shadow:inset #000 0px 0px 10px;
  margin-top:17px;
  padding-bottom:10px;
  margin-bottom:50px;
}

h2{
  color:#FFF;
  text-shadow:#000 0px 1px 2px;
  font:13px arial;
  padding-left:40px;
  margin:0px;
  margin-bottom:2px;
}

/*****************************************
COMMENTS
*****************************************/
.comment{
  color:#8F8F8F;
  padding-left:40px;
  padding-top:10px;
}
  
.comment2{
  color:#8F8F8F;
  padding-left:40px;
  padding-top:10px;
}

h3{
  clear:both;
  color:#FFF;
  font:13px Century Gothic;
  text-transform:uppercase;
  text-shadow:#000 0px 2px 10px;
  border-top:1px solid rgba(255,255,255,0.2);
  padding-top:5px;
  text-align:center;
  position:relative;
}

h3:before{
  content:"";
  width:100%;
  border-top:1px solid #000;
  height:1px;
  position:absolute;
  top:-2px;
  left:0px;
}