비율그래프 > 기타팁(프로그램)

본문 바로가기
사이트 내 전체검색

오늘 본 상품 0

없음


기타팁(프로그램)

비율그래프

페이지 정보

profile_image
작성자 유토하우스
댓글 0건 조회 1,543회 작성일 23-04-28 09:36

본문

안녕하십니까?

유토하우스 유토맨입니다

다양하게 응용가능합니다 

1/ html

<div class="zt-span6 last">
<p>&nbsp;</p>
<p>&nbsp;</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>


2/JavaScript + jQuery 1.9.1

(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));


3. 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: 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);
    }
추천0

댓글목록

등록된 댓글이 없습니다.


고객센터

카톡문의(ID) : jbm5894 평일 (10:00~17::00) 점심시간 (12:00~13::00) 토,일,공휴일 휴무

입금계좌안내

카카오은행 3333-27-9421813 정병묵

아름다운 공간만들기 | 웹제작 유토하우스 주소 경기 용인시 수지구 죽전동 172-1 E-MAIL. utohouse@gmail.com

개인정보보호책임자 정병묵

네이버블로그인스타그램네이버카페유튜브페이스북트위터카카오
아름다운 공간만들기 | 웹제작 Copyright © 2001-2013 utohouse.co.kr. All Rights Reserved.