Partially completed circle (with text) in CSS
I am trying to create the following effect in design: http://i.imgur.com/RIaSA3N.png
I can create a face with a bounded circle, but the question of partially completing a circle is difficult. There are many different ways to do this with Javascript and Canvas, but I cannot find a reliable way to achieve this in CSS. I don't mind having several different classes for different values, but is there an elegant solution?
+3
source to share
1 answer
Updated : This is very possible using pure CSS3.
(You will be able to open the demo below and tweak for your result)
Use @keyframes
to animate between numbers. You need to add this.
Below is used @keyframes 'rotate' {
for circular motion.
body { background: #222; }
.circle {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #333;
border-radius: 50%;
}
.inner-circle {
width: 92%;
height: 92%;
background: #222;
border-radius: 50%;
margin: auto;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.spinner {
height: 0;
width: 0;
border-radius: 50%;
border-right: 50px solid rgba(255,255,255,0.3);
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid transparent;
-webkit-animation: rotate 1.6s infinite;
animation: rotate 1.6s infinite;
}
@-webkit-keyframes 'rotate' {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes 'rotate' {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="circle">
<div class="spinner"></div>
<div class="inner-circle"></div>
</div>
+1
source to share