진행바_ 그래프_가로막대.htmlhttps://github.com/jasonday/printThis/blob/master/printThis.js
https://jsfiddle.net/kkyo/3jhr2x9e/4/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
</head>
<body>
<span style="font-size: 14pt;"><script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
(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));
</script>
<style>
/*-------------------------------------------------------------------------*/
/* 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: 6px;
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);
}
</style>
<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>
</span>
</body>
</html>
'jquery소스' 카테고리의 다른 글
| 돌아가는 아이콘 (0) | 2016.11.21 |
|---|---|
| 상하 스크롤 발생해주는 jquery vticker (0) | 2016.11.10 |
| jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동하기 (0) | 2016.11.09 |
