/Progress-Bar-Skills-{-With-HTML-5-&-CSS-3-}.markdown

## index.html
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>PG By : Reza Padillah</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="box">
	<h3>&middot; <a href="http://twitter.com/anaksmkti">My</a> Programming Skills &middot;</h3>

	<div class="bg">
	<div class="html">
		<span class="left">HTML</span>
		<span class="right">78%</span>
	</div>
	</div>
<br>
	<div class="bg">
	<div class="css">
		<span class="left">css</span>
		<span class="right">85%</span>
	</div>
	</div>
<br>
	<div class="bg">
	<div class="php">
		<span class="left">php</span>
		<span class="right">55%</span>
	</div>
	</div>
</div>

</body>
</html>

## Progress-Bar-Skills-{-With-HTML-5-&-CSS-3-}.markdown

      
    Raw
  

              Progress-Bar-Skills-{-With-HTML-5-&-CSS-3-}.markdown
            
          
    Progress Bar Skills { With HTML 5 & CSS 3 }

Progress Bar Skills { With HTML 5 & CSS 3 }
By : Reza Padillah
A Pen by Reza Padillah on CodePen.
License.

  
## style.css
.box{
	background: #fff;
	width: 70%;
	box-shadow: 0 10px 6px -6px #000;
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 50px 10px;
	margin: 0 auto;
}

h3{
	font-family: Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: #444;
	text-align: center;
}

a{
	color: #444;
	text-decoration: underline;
}

.bg{
	background: #f2efef;
	width: 700px;
	margin: 0 auto;
}

.html{
	background: -webkit-linear-gradient(135deg,
		#009999 25%, #008283 25%,
		#008283 50%, #009999 50%,
		#009999 75%, #008283 75%);
  background: -moz-linear-gradient(135deg,
		#009999 25%, #008283 25%,
		#008283 50%, #009999 50%,
		#009999 75%, #008283 75%);
  background: -o-linear-gradient(135deg,
		#009999 25%, #008283 25%,
		#008283 50%, #009999 50%,
		#009999 75%, #008283 75%);
	width: 78%;
	height: 20px;
	padding: 10px 10px;
	background-size: 50px 50px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	-webkit-animation: animasi 3.0s linear infinite;
  -moz-animation: animasi 3.0s linear infinite;
  -o-animation: animasi 3.0s linear infinite;
}

.css{
	background: -webkit-linear-gradient(135deg,
		#E74C3C 25%, #C0392B 25%,
		#C0392B 50%, #E74C3C 50%,
		#E74C3C 75%, #C0392B 75%);
  background: -moz-linear-gradient(135deg,
		#E74C3C 25%, #C0392B 25%,
		#C0392B 50%, #E74C3C 50%,
		#E74C3C 75%, #C0392B 75%);
  background: -o-linear-gradient(135deg,
		#E74C3C 25%, #C0392B 25%,
		#C0392B 50%, #E74C3C 50%,
		#E74C3C 75%, #C0392B 75%);
	width: 85%;
	height: 20px;
	padding: 10px 10px;
	background-size: 50px 50px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	-webkit-animation: animasi 3.0s linear infinite;
  -moz-animation: animasi 3.0s linear infinite;
  -o-animation: animasi 3.0s linear infinite;
}

.php{
	background: -webkit-linear-gradient(135deg,
		#F1C40F 25%, #F39C12 25%,
		#F39C12 50%, #F1C40F 50%,
		#F1C40F 75%, #F39C12 75%);
  background: -moz-linear-gradient(135deg,
		#F1C40F 25%, #F39C12 25%,
		#F39C12 50%, #F1C40F 50%,
		#F1C40F 75%, #F39C12 75%);
  background: -o-linear-gradient(135deg,
		#F1C40F 25%, #F39C12 25%,
		#F39C12 50%, #F1C40F 50%,
		#F1C40F 75%, #F39C12 75%);
	width: 55%;
	height: 20px;
	padding: 10px 10px;
	background-size: 50px 50px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	-webkit-animation: animasi 3.0s linear infinite;
  -moz-animation: animasi 3.0s linear infinite;
  -o-animation: animasi 3.0s linear infinite;
}

@-webkit-keyframes animasi {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 50px
    }
}

@-moz-keyframes animasi {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 50px
    }
}

@-o-keyframes animasi {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 50px
    }
}
.right{
	float: right;
	color: #fff;
	font-size: 15px;
	margin-top: 1px;
}

.left{
	float: left;
	color: #fff;
	font-size: 15px;
	margin-top: 1px;
}
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>PG By : Reza Padillah</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<div class="box">
	<h3>· <a href="http://twitter.com/anaksmkti">My</a> Programming Skills ·</h3>

	<div class="bg">
	<div class="html">
	<span class="left">HTML</span>
	<span class="right">78%</span>
	</div>
	</div>
	<br>
	<div class="bg">
	<div class="css">
	<span class="left">css</span>
	<span class="right">85%</span>
	</div>
	</div>
	<br>
	<div class="bg">
	<div class="php">
	<span class="left">php</span>
	<span class="right">55%</span>
	</div>
	</div>
	</div>

	</body>
	</html>
	.box{
	background: #fff;
	width: 70%;
	box-shadow: 0 10px 6px -6px #000;
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 50px 10px;
	margin: 0 auto;
	}

	h3{
	font-family: Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: #444;
	text-align: center;
	}

	a{
	color: #444;
	text-decoration: underline;
	}

	.bg{
	background: #f2efef;
	width: 700px;
	margin: 0 auto;
	}

	.html{
	background: -webkit-linear-gradient(135deg,
	#009999 25%, #008283 25%,
	#008283 50%, #009999 50%,
	#009999 75%, #008283 75%);
	background: -moz-linear-gradient(135deg,
	#009999 25%, #008283 25%,
	#008283 50%, #009999 50%,
	#009999 75%, #008283 75%);
	background: -o-linear-gradient(135deg,
	#009999 25%, #008283 25%,
	#008283 50%, #009999 50%,
	#009999 75%, #008283 75%);
	width: 78%;
	height: 20px;
	padding: 10px 10px;
	background-size: 50px 50px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	-webkit-animation: animasi 3.0s linear infinite;
	-moz-animation: animasi 3.0s linear infinite;
	-o-animation: animasi 3.0s linear infinite;
	}

	.css{
	background: -webkit-linear-gradient(135deg,
	#E74C3C 25%, #C0392B 25%,
	#C0392B 50%, #E74C3C 50%,
	#E74C3C 75%, #C0392B 75%);
	background: -moz-linear-gradient(135deg,
	#E74C3C 25%, #C0392B 25%,
	#C0392B 50%, #E74C3C 50%,
	#E74C3C 75%, #C0392B 75%);
	background: -o-linear-gradient(135deg,
	#E74C3C 25%, #C0392B 25%,
	#C0392B 50%, #E74C3C 50%,
	#E74C3C 75%, #C0392B 75%);
	width: 85%;
	height: 20px;
	padding: 10px 10px;
	background-size: 50px 50px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	-webkit-animation: animasi 3.0s linear infinite;
	-moz-animation: animasi 3.0s linear infinite;
	-o-animation: animasi 3.0s linear infinite;
	}

	.php{
	background: -webkit-linear-gradient(135deg,
	#F1C40F 25%, #F39C12 25%,
	#F39C12 50%, #F1C40F 50%,
	#F1C40F 75%, #F39C12 75%);
	background: -moz-linear-gradient(135deg,
	#F1C40F 25%, #F39C12 25%,
	#F39C12 50%, #F1C40F 50%,
	#F1C40F 75%, #F39C12 75%);
	background: -o-linear-gradient(135deg,
	#F1C40F 25%, #F39C12 25%,
	#F39C12 50%, #F1C40F 50%,
	#F1C40F 75%, #F39C12 75%);
	width: 55%;
	height: 20px;
	padding: 10px 10px;
	background-size: 50px 50px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	-webkit-animation: animasi 3.0s linear infinite;
	-moz-animation: animasi 3.0s linear infinite;
	-o-animation: animasi 3.0s linear infinite;
	}

	@-webkit-keyframes animasi {
	0% {
	background-position: 0 0;
	}

	100% {
	background-position: 50px 50px
	}
	}

	@-moz-keyframes animasi {
	0% {
	background-position: 0 0;
	}

	100% {
	background-position: 50px 50px
	}
	}

	@-o-keyframes animasi {
	0% {
	background-position: 0 0;
	}

	100% {
	background-position: 50px 50px
	}
	}
	.right{
	float: right;
	color: #fff;
	font-size: 15px;
	margin-top: 1px;
	}

	.left{
	float: left;
	color: #fff;
	font-size: 15px;
	margin-top: 1px;
	}