JSFiddle - React, Tailwind, and code Playground

THIS ONE: Animated Skill Graph

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="skillgraphs">
    <h1>jQuery Animated Skill Graphs</h1>
    <div class="skill-container">
        <ul>
            <li>
                <a id="skill-html" href="#" class="html" title="100%">
                    <span class="vSkill-title">HTML &amp; HTML5</span>
                </a>
            </li>
            <li>
                <a id="skill-css" href="#" class="css" title="90%">
                    <span class="vSkill-title">CSS &amp; CSS3</span>
                </a>
            </li>
            <li>
                <a id="skill-jquery" href="#" class="jquery" title="70%">
                    <span class="vSkill-title">jQuery</span>
                </a>
            </li>
            <li>
                <a id="skill-js" href="#" class="js" title="80%">
                    <span class="vSkill-title">JavaScript</span>
                </a>
            </li>
            <li>
                <a id="skill-php" href="#" class="php" title="65%">
                    <span class="vSkill-title">PHP</span>
                </a>
            </li>
            <li>
                <a id="skill-mysql" href="#" class="mysql" title="65%">
                    <span class="vSkill-title">MySQL</span>
                </a>
            </li>
            <li>
                <a id="skill-wordpress" href="#" class="wordpress" title="75%">
                    <span class="vSkill-title">WordPress</span>
                </a>
            </li>
        </ul>
    </div>
    
    <br />
    
    <div class="hor-skill-container">
        <ul>
            <li>
                <a id="hor-skill-html" href="#" class="html" title="100%">
                    <span class="hSkill-title">HTML &amp; HTML5</span>
                </a>
            </li>
            <li>
                <a id="hor-skill-css"...

CSS

/* --- Demo Styles - Remove Before Flight --- */
body {
  color: #fff;
  margin: 20px;
  font-family: 'Yanone Kaffeesatz';
  font-size: 16px;
  font-weight: normal;
  background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}
h1 {
    display: block;
    margin: 0 0 20px 15px;
    font-size: 46px;
    font-family: 'Yanone Kaffeesatz';
    color: rgba(255,255,255,0.2);
    text-decoration: none;
}
h1:hover {
    color: rgba(255,255,255,0.3);
}
.footer {
  width: 450px;
  margin: 0 auto;
  clear:both;
}
p {
    padding-top: 20px;
    font-size: 16px;
    color: rgba(255,255,255,0.4);
}
a {
    color: #f27011;
    text-decoration: none;
}
a:hover {
    color: #f63a0f;
}
.skillgraphs {
  width: 450px;
  margin: 0 auto;
}

/* --- Skill Styles --- */
.skill-container { 
    height:250px;
    width:200px;      
    margin:0 auto;
}
.skill-container ul { 
    margin:0; 
    padding:0; 
    list-style:none;
}
.skill-container li { 
    width:20px; 
    height:250px; 
    margin:0 3px; 
    position:relative; 
    float:left;
}

.skill-container li a { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:0;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
}

.skill-container li a:hover { background-color:#222; }
.vSkill-title {
    margin:10px 0 0 1px;
    color:#444;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
    letter-spacing:1px;
}

/* --- Horizontal Skill Styles --- */
.hor-skill-container { 
    width:250px;
    margin:10px auto;
}
.skill-container ul {
    margin:0;
    padding:0;
    list-style:none;
}
.hor-skill-container li {
    width:100%;
    height:20px;
    margin:3px 0;
    position:relative;
    float:left;
    text-indent:6px;
}

.hor-skill-container li a {
    position:absolute;
   ...

JavaScript

$(document).ready(function() {
    // Vertical Skills
    $('#skill-html').animate( { height: '100%' }, 2500);
    $('#skill-css').animate( { height: '90%' }, 2500);
    $('#skill-jquery').animate( { height: '70%' }, 2500);
    $('#skill-js').animate( { height: '80%' }, 2500);
    $('#skill-php').animate( { height: '65%' }, 2500);
    $('#skill-mysql').animate( { height: '65%' }, 2500);
    $('#skill-wordpress').animate( { height: '75%' }, 2500);
    
    //Horizontal Skills
    $('#hor-skill-html').animate( { width: '100%' }, 2500);
    $('#hor-skill-css').animate( { width: '90%' }, 2500);
    $('#hor-skill-jquery').animate( { width: '70%' }, 2500);
    $('#hor-skill-js').animate( { width: '80%' }, 2500);
    $('#hor-skill-php').animate( { width: '65%' }, 2500);
    $('#hor-skill-mysql').animate( { width: '65%' }, 2500);
    $('#hor-skill-wordpress').animate( { width: '75%' }, 2500);
});