Progress Bar Skills { With HTML 5 & CSS 3 } By : Reza Padillah
A Pen by Reza Padillah on CodePen.
Created
January 24, 2015 10:48
-
-
Save anonymous/486f5de5a0e8b2067a72 to your computer and use it in GitHub Desktop.
Progress Bar Skills { With HTML 5 & CSS 3 }
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment