Skip to content

Instantly share code, notes, and snippets.

@magicianShiro

magicianShiro/circle.html

Created September 10, 2018 09:59
Show Gist options
  • Save magicianShiro/54e6d9c3e21af21870b62aac1a9caf25 to your computer and use it in GitHub Desktop.
Save magicianShiro/54e6d9c3e21af21870b62aac1a9caf25 to your computer and use it in GitHub Desktop.
Download ZIP
css绘制没有缝隙的圆形进度条--非clip
Raw
circle.html
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<style>
.circle_process{
position: relative;
width: 200px;
height : 200px;
margin: 100px;
}
.circle_process .wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
/* overflow: hidden; */
}
.circle_process .right{
right:0;
}
.circle_process .left{
left:0;
}
.circle_process .circle{
width: 100px;
height: 200px;
position: absolute;
top:0;
transform : rotate(-180deg);
background-color: #f60;
}
.circle_process .rightcircle{
border-radius: 0 100px 100px 0px;
transform-origin:left center;
/* -webkit-animation: circle_right 5s linear; */
}
.circle_process .leftcircle{
transform-origin:right center;
border-radius: 100px 0px 0px 100px;
/* -webkit-animation: circle_left 5s linear; */
}
@-webkit-keyframes circle_right{
0%{
-webkit-transform: rotate(-180);
}
50%,100%{
-webkit-transform: rotate(0deg);
}
}
@-webkit-keyframes circle_left{
0%,50%{
-webkit-transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
</style>
<body>
<div class="circle_process">
<div class="wrapper right">
<div class="circle rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circle leftcircle" id="leftcircle"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment