Skip to content

Instantly share code, notes, and snippets.

@csssecrets
Created January 27, 2015 17:32
Show Gist options
  • Save csssecrets/722909b9808c14eb7300 to your computer and use it in GitHub Desktop.
Save csssecrets/722909b9808c14eb7300 to your computer and use it in GitHub Desktop.
Animated pie chart
/**
* Animated pie chart
*/
.pie {
width: 100px; height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
color: #655;
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite;
}
@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: currentColor; }
}
<div class="pie"></div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment