CSS circle border fill animation
You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow,
.inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 50px, 50px, 25px);
border-radius: 100%;
background-color: #fff;
}
.fill,
.dot span {
background-color: #f50;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
@keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
@keyframes right {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}<div id='loading'>
<div class='outer-shadow'>
</div>
<div class='inner-shadow'>
</div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>CSS animate circle border filling with color
There is a very easy to follow, informative and detailed tutorial on exactly how to achieve this (and more) by Anders Ingemann, which can be found here.
Its a fairly complex operation- so I'll simply distil the final stage from the tutorial here
Demo Fiddle
HTML
<div class="radial-progress">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset"></div>
</div>
CSS/LESS
.radial-progress {
@circle-size: 120px;
@circle-background: #d6dadc;
@circle-color: #97a71d;
@inset-size: 90px;
@inset-color: #fbfbfb;
@transition-length: 1s;
@shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
margin: 50px;
width: @circle-size;
height: @circle-size;
background-color: @circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: @circle-size;
height: @circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: @shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform @transition-length;
transition: -ms-transform @transition-length;
transition: transform @transition-length;
}
.mask {
clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
.fill {
clip: rect(0px, @circle-size/2, @circle-size, 0px);
background-color: @circle-color;
}
}
}
.inset {
width: @inset-size;
height: @inset-size;
position: absolute;
margin-left: (@circle-size - @inset-size)/2;
margin-top: (@circle-size - @inset-size)/2;
background-color: @inset-color;
border-radius: 50%;
box-shadow: @shadow;
}
}
Example jQuery (could be substituted with CSS)
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function () {
var rotation = Math.floor(Math.random() * 180);
var fill_rotation = rotation;
var fix_rotation = rotation * 2;
for (i in transform_styles) {
$('.circle .fill, .circle .mask.full').css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
$('.circle .fill.fix').css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
}
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
Filling a circle border by percent
For first linear part, you can use linear-gradient:(270deg,...) for filling 50% of the circle.
For other linear part, you can increase the angle (270°+) to fill more than 50% of the circle (360° or 0° = 75% of the circle ... 90° = 100% of the circle)
For example: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%) combination creates a circle with a lightgray background, filled with seventy-five percent black color. (snippet below)
.circle { position: relative; top: 5px; left: 5px; text-align: center; width: 100px; height: 100px; border-radius: 100%; background-color: #ffffff;}
.circle-border { position: relative; text-align: center; width: 110px; height: 110px; margin-left: 30%; border-radius: 100%; background-color: #E53B3B; background: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%)}<div class="circle-border"> <div class="circle"> </div></div>CSS ONLY Animate Draw Circle with border-radius and transparent background
This is my solution.
I set a background on body to show it is transparent
body { background: repeating-linear-gradient(45deg, white 0px, lightblue 100px); height: 500px; background-size: 500px 500px; background-repeat: no-repeat;}
html { height: 100%;}
#container { position: absolute; width: 400px; height: 400px; border: solid red 1px; animation: colors 4s infinite;}
#halfclip { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center; animation: cliprotate 16s steps(2) infinite; -webkit-animation: cliprotate 16s steps(2) infinite;}
.halfcircle { box-sizing: border-box; height: 100%; right: 0px; position: absolute; border: solid 25px transparent; border-top-color: blue; border-left-color: blue; border-radius: 50%;}#clipped { width: 200%; animation: rotate 8s linear infinite; -webkit-animation: rotate 8s linear infinite;}#fixed { width: 100%; transform: rotate(135deg); animation: showfixed 16s steps(2) infinite; -webkit-animation: showfixed 16s linear infinite;}
@-webkit-keyframes cliprotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
@keyframes cliprotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
@-webkit-keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);}}
@keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);}}
@-webkit-keyframes showfixed { 0% {opacity: 0;} 49.9% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;}}<div id="container"> <div id="halfclip"> <div class="halfcircle" id="clipped"> </div> </div> <div class="halfcircle" id="fixed"> </div></div>keyframes filling color in the circle with css and jquery
If you are having a problem in downloading Sass below is the code without compass component just pure css.
This will work in your apache server.
var timer=document.getElementsByClassName('timer')[0];
var timer_1=document.getElementsByClassName('timer_1')[0];
timer_1.style.transform="rotate(360deg)";
timer_1.style.background="#ddd";
window.addEventListener('scroll',function(){
var scrolled=window.scrollY;
var diff=scrolled-180;
if(scrolled>=0 && scrolled<=180 ){
timer_1.style.background="#ddd";
timer_1.style.transform="rotate("+(360-scrolled)+"deg)";
if(scrolled==180){
timer_1.style.transform="rotate(180deg)";
}
}
else{
if(scrolled>=180.0001){
timer_1.style.background="#6c6";
timer_1.style.transform="rotate("+(360-diff)+"deg)";
if(scrolled>=360){
timer_1.style.transform="rotate(180deg)";
}
}
}
})body{
min-height: 3000px;
}
.timer { margin-top:100px;background: linear-gradient(90deg, #6c6 50%, #ddd 50%); border-radius: 50%; height: 6em; position: fixed; width: 6em; }
.timer_1 { border-radius: 100% 0 0 100% / 50% 0 0 50%; content: ''; height: 100%; left: 0; position: absolute; top: 0; transform-origin: 100% 50%; width: 50%;}
p{
font-size: 20px;
font-family:'arial';
margin-left: 500px;
width: 60%;
}<div class="timer">
<div class="timer_1"></div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>Fill div with circular color animation
This is probably what you are looking for: http://jsfiddle.net/F9pLC/
The idea is to create a circle using border-radius and then make it absolutely positioned. Then we can grow it from the mouse coordinates.
// You can modify this if you want
var START_RADIUS = 25;
$("#someText").click(function (e) {
// Get the width and the height
var width = $(this).width(),
height = $(this).height();
// Get the diagonal (this is what our circle needs to expand to)
var diag = Math.ceil(Math.sqrt(width * width + height * height)) * 2;
// Get the mouse coordinates
var pageX = e.pageX,
pageY = e.pageY;
// Create a circle
$('<div class="circle">').appendTo("#someText").css({
width: START_RADIUS * 2,
height: START_RADIUS * 2,
"border-radius": START_RADIUS,
top: pageY - START_RADIUS,
left: pageX - START_RADIUS,
"background-color": $("#newColor").val()
}).animate({
width: diag,
height: diag
}, {
step: function (now, fx) {
// This occurs every step of the animation
// Modify the radius so that it grows along with the width and height
if (fx.prop === "height") return;
$(this)
.css("top", pageY - START_RADIUS - now / 2)
.css("left", pageX - START_RADIUS - now / 2)
.css("border-radius", now / 2);
},
easing: "linear",
duration: 2000, // The number of milis to grow completely
done: function () {
// Remove the circle and change the background color
$("#someText").css("background-color", $(this).css("background-color")).css("z-index", "");
$(this).remove();
}
});
$("#someText").css("z-index", -3);
});
// So that when we click on the color input, it doesn't create a circle
$("#newColor").click(function(e) { e.stopPropagation(); });
Percentage circle border CSS React
Is don't think it's particularly a bug in your code - it's just that the system is trying to work out how to show part CSS pixels on a screen which uses several screen pixels per CSS pixel. Some can get 'left behind'.
A different way of creating the effect you want is to use background images made up of a conic gradient overlaid with a radial one (to give the 'hole' in the middle).
This is a simple snippet to demonstrate the idea in HTML/CSS. The CSS variable --ratio could be set in JS using setProperty to whatever the ratio of red to green is required.
.ratio {
--ratio: 0.3;
height: 150px;
width: 150px;
border-radius: 50%;
position: relative;
clip-path: circle(50%);
}
.ratio::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: conic-gradient(red 0 calc(var(--ratio) * 360deg), lime calc(var(--ratio) * 360deg) 360deg);
z-index: -2;
}
.ratio::after {
content: '';
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: white;
border-radius: 50%;
z-index: -1;
}<div class="ratio"></div>Related Topics
Web Testing for Ie. How Accurate Is Ietester
(Css) Eliminating Browser's 'Selected' Lines Around a Hyperlinked Image
What Is the Use Case of :Host-Context Selector in Angular
How to Change the Play Icon of Embedded Youtube Videos
Css: How to Set Container Size Equal to Background Image Size
Google Maps API V3 Tools: Visual Distortions
How to Give a Font Awesome Icon a Background Color
How to Edit CSS of New Google Forms
How to Add Custom CSS in Wix Website
CSS 3 - Transition Prefixes - Which Ones to Use
Using Less, CSS3 Calc() Doesn't Work Correctly
Css: What's a Good Way to Create a Raised Box Effect
Difference Between Baseline of Empty and Non-Empty Inline Blocks