JSFiddle - React, Tailwind, and code Playground
by jwpg018241
HTML
<script src="cdn.amcharts.com/lib/3/amcharts.js"></script>
<script src="cdn.amcharts.com/lib/3/serial.js"></script>
<div class="zt-span6 last">
<p> </p>
<p> </p>
<h3><strong>진행율 바</strong></h3>
<div class="zt-skill-bar"><div data-width="88" style="">쇼핑몰<span>88%</span></div></div>
<div class="zt-skill-bar"><div data-width="92" style="">웹사이트/모바일<span>92%</span></div></div>
<div class="zt-skill-bar"><div data-width="82" style=";">패키지<span>82%</span></div></div>
<div class="zt-skill-bar"><div data-width="85" style=";">C.I/B.I/네이밍<span>85%</span></div></div>
<div class="zt-skill-bar"><div data-width="60" style=";">HTML5/CSS3<span>60%</span></div></div></div>
<div class="zt-span6 last">
<p> </p>
<p> </p>
<h3><strong>진행율 바</strong></h3>
<div class="zt-skill-bar"><div data-width="88" style="">쇼핑몰<span>88%</span></div></div>
<div class="zt-skill-bar"><div data-width="92" style="">웹사이트/모바일<span>92%</span></div></div>
<div class="zt-skill-bar"><div data-width="82" style=";">패키지<span>82%</span></div></div>
<div class="zt-skill-bar"><div data-width="85" style=";">C.I/B.I/네이밍<span>85%</span></div></div>
<div class="zt-skill-bar"><div data-width="60" style=";">HTML5/CSS3<span>60%</span></div></div></div>
<div class="zt-span6 last">
<p> </p>
<p> </p>
<h3><strong>진행율 바</strong></h3>
<div class="zt-skill-bar"><div data-width="88" style="">쇼핑몰<span>88%</span></div></div>
<div class="zt-skill-bar"><div data-width="92" style="">웹사이트/모바일<span>92%</span></div></div>
<div class="zt-skill-bar"><div data-width="82" style=";">패키지<span>82%</span></div></div>
<div class="zt-skill-bar"><div data-width="85" style=";">C.I/B.I/네이밍<span>85%</span></div></div>
<div class="zt-skill-bar"><div data-width="60" style=";">HTML5/CSS3<span>60%</span></div></div></div>
<div class="zt-span6 last">
<p> </p>
<p> </p>
<h3><strong>진행율 바</strong></h3>
<div class="zt-skill-bar"><div data-width="88" style="">쇼핑몰<span>88%</span></div></div>
<div...CSS
/*-------------------------------------------------------------------------*/
/* Skill bar style
/*-------------------------------------------------------------------------*/
.zt-skill-bar {
color: #fff;
font-size: 11px;
line-height: 25px;
height: 25px;
margin-bottom: 5px;
background-color: rgba(0,0,0,0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
.zt-skill-bar * {
webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.zt-skill-bar div {
background-color: #ffc600;
position: relative;
padding-left: 25px;
width: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms- border-radius: 2px;
border-radius: 2px;
}
.zt-skill-bar span {
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
padding: 0 5px 0 10px;
background-color: #1a1a1a;
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
-ms-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
}
.zt-skill-bar span:before {
content: "";
position: absolute;
width: 116px;
height: 6px;
top: 50%;
left: -3px;
margin-top: -3px;
background-color: #1a1a1a;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}JavaScript
(function( $ ) {
"use strict";
$(function() {
function animated_contents() {
$(".zt-skill-bar > div ").each(function (i) {
var $this = $(this),
skills = $this.data('width');
$this.css({'width' : skills + '%'});
});
}
if(jQuery().appear) {
$('.zt-skill-bar').appear().on('appear', function() {
animated_contents();
});
} else {
animated_contents();
}
});
}(jQuery));