콘디쌤2017.05.23 14:27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>

<style>
    body {
        margin: 0;
    }
    div, header, footer {
        position: relative;
    }
    
    .pie {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 50px;
        
    }
    
    .pie:before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0;
        bottom: 0;
        border: 30px solid #1abc9c;
        border-radius: 50%;
        transform: rotate(0deg);
        clip: rect(auto, 100px, auto, auto);
        transition: transform 1s linear;
    }
    
    .pie.rotate:before {
        transform: rotate(180deg);
    }
    
    .pie .cover {
        
        position: absolute;
        top: 0; left: 0;
        width: 50%; bottom: 0;
        background-color: #fff;
    }
    
    .pie .deg {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0;
        bottom: 0;
        border: 20px solid #1abc9c;
        border-radius: 50%;
        transform: rotate(0deg);
        clip: rect(auto, 100px, auto, auto);
        
        transition-property : transform;
        
        transition-timing-function: linear;
    }
    
    .pie .score {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #ccc;
        z-index: 999;
    }
    .pie .score:after {
        content: '%';
    }
    
   
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    
    
    pieAni( $(".pie").eq(0) );
    pieAni( $(".pie").eq(1) );
    pieAni( $(".pie").eq(2) );
    
    
    function pieAni($pie) {
        
        var score = $pie.attr("score");
        
        var duration = score / 50;
        var deg = score * 3.6 ;
        
        $pie.addClass("rotate");
        $pie.find(".deg").css("transition-duration", duration+"s");
        $pie.find(".deg").css("transform", "rotate("+deg+"deg)");
        
        var $cover = $pie.find(".cover");
        
        setTimeout(function(){
            $cover.fadeOut(0);
        }, 1000);
        
        
        increase($pie, 1, 1, score);
        
    }
    
    function increase($pie, start, next, end) {
        
        
        $pie.find(".score").text( next );
        
        var st = setTimeout(function(){
            if (next < end) {
                increase($pie, start, next+1, end) ;
            }
        }, 20  );
            
    }

});
</script>
    
</head>
<body>
    <div class="pie" score="90">
        
        <div class="deg"></div>
        <div class="cover"></div>
        <div class="score">0</div>
    </div>
    <div class="pie" score="75">
        
        <div class="deg"></div>
        <div class="cover"></div>
        <div class="score">0</div>
    </div>
    
    <div class="pie" score="85">
        
        <div class="deg"></div>
        <div class="cover"></div>
        <div class="score">0</div>
    </div>
</body>
</html>



문서 첨부 제한 : 0Byte/ 10.00MB
파일 크기 제한 : 10.00MB (허용 확장자 : *.*)