Skip to content

Instantly share code, notes, and snippets.

@WuXianglong

WuXianglong/Percentage_Circle2.html

Created October 24, 2019 08:04
Show Gist options
  • Save WuXianglong/c9e5d39a45022ffd647644f84429b5a6 to your computer and use it in GitHub Desktop.
Save WuXianglong/c9e5d39a45022ffd647644f84429b5a6 to your computer and use it in GitHub Desktop.
Download ZIP
Percentage Circle
Raw
Percentage_Circle2.html
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Percentage Circle</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,300,300i,400,400i,600,600i,700,700i,900");
body {
font-family: "Titillium Web", sans-serif;
margin: 0 auto;
}
.c100.p75 .slice {
clip: rect(auto, auto, auto, auto);
}
.pie, .c100 .bar, .c100.p75 .fill {
position: absolute;
border: 0.1em solid #eb7d4b;
width: 0.9em;
height: 0.9em;
clip: rect(0em, 0.5em, 1.2em, 0em);
border-radius: 50%;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
position: absolute;
}
.pie-fill, .c100.p75 .bar:after, .c100.p75 .fill {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.wrapper {
width: 1200px;
margin: 0 auto;
}
.c100 {
position: relative;
font-size: 160px;
width: 1em;
height: 1em;
border-radius: 50%;
float: left;
margin: 0.4em;
background-color: #dfe8ed;
}
.c100 *, .c100 *:before, .c100 *:after {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.c100 > span {
position: absolute;
width: 100%;
z-index: 1;
left: 0;
top: 0;
width: 5em;
line-height: 5em;
font-size: 0.2em;
color: #3c4761;
display: block;
text-align: center;
white-space: nowrap;
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.c100:after {
position: absolute;
top: 0.05em;
left: 0.05em;
display: block;
content: " ";
border-radius: 50%;
background-color: #ffffff;
width: 0.9em;
height: 0.9em;
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.c100 .slice {
position: absolute;
width: 1.2em;
height: 1.2em;
clip: rect(0em, 1em, 1em, 0.5em);
top: -0.05em;
left: -0.05em;
}
.c100.p75 .bar {
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.c100:hover {
cursor: default;
}
.c100:hover > span {
width: 3.33em;
line-height: 3.33em;
font-size: 0.3em;
color: #eb7d4b;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="c100 p75">
<span>75%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment