Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

半圆形进度条 #39

Open
weekeight opened this issue Dec 9, 2015 · 0 comments
Open

半圆形进度条 #39

weekeight opened this issue Dec 9, 2015 · 0 comments
Labels
css

Comments

@weekeight
Copy link
Owner

半圆形进度条demo，此示例最大进度为50%（也可另行设置，让半圆形就代表100%进度）

demo 地址

demo

code snippets

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="referrer" content="origin-when-cross-origin">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<title>半圆进度</title>
<style>
.center{
    margin: 0 auto;
    text-align: center;
}
.half-circle-progress{
    position: relative;
    display: inline-block;
    width: 100px;
    height: 200px;
    margin: 0 30px;
    overflow: hidden;
}

.half-circle-progress .circle{
    position: absolute;
    left: -100px;
    clip: rect(0, 200px, 200px, 100px);
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid transparent;
    transform: rotate3d(0,0,0,0);
    transition: all .5s;
    will-change: transform;
}

/* 右边半圆进度 */
.half-circle-progress.right .under{
    z-index: 2;
    border-color: #6EC84E!important;
}

.half-circle-progress.right .mask{
    z-index: 3;
    border-color: #F0F0F0!important;
}

/* 左边半圆进度 */
.half-circle-progress.left{
    transform: rotate3d(0,1,0,180deg);
}
.half-circle-progress.left .under{
    z-index: 2;
    border-color: #6EC84E!important;
}

.half-circle-progress.left .mask{
    z-index: 3;
    border-color: #F0F0F0!important;
}


</style>
</head>
<body>
       <p>click to show circle percent</p>
    <div class="center">
        <div class="half-circle-progress right J_HalfCircleProgress" data-percent="45">
            <div class="circle under"></div>
            <div class="circle mask J_Mask"></div>
        </div>

        <div class="half-circle-progress left J_HalfCircleProgress" data-percent="25">
            <div class="circle under"></div>
            <div class="circle mask J_Mask"></div>
        </div>
    </div>
</body>
<script src="http://statics.mangguoyisheng.com/resource/demo/1.0.0/third-party/jquery/jquery-2.1.4.min.js"></script>
<script>
    $('.J_HalfCircleProgress').click(function(ev){
        var currentTarget$ = $(ev.currentTarget);
        var percent = parseInt(currentTarget$.attr('data-percent'));

        currentTarget$.find('.J_Mask').css({
            'transform': 'rotate3d(0,0,1,' + percent*360/100 + 'deg)'
        });
    });
</script>
</html>
@weekeight weekeight added the css label Dec 9, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@weekeight