CODEWITHSUNDEEP
jqueryhtmlcss
Kiwimoisi
Kiwimoisi

Reputation: 4192

Circle shape animation css3 and jquery

Is there a way I could make the animation fill run smooth ?

By that I mean every sec it is ticking it will go from 20 to 40 let't say but you would see it fill the circle millimeter by millimeter and not jump like it is at the moment ? Because it doesn't matter how long I put as parameter for the transition length it still looks like it fills by jumping and it's not a smooth filling.

This is the fiddle

.radial-progress {
@circle-size: 120px;
@circle-background: #d6dadc;
@circle-color: #97a71d;
@inset-size: 90px;
@inset-color: #fbfbfb;
@transition-length: 0.2s;
@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;
}

}

http://jsfiddle.net/32Y8U/523/

Thanks

Upvotes: 0

Views: 1103

Answers (2)

Ed Bayiates
Ed Bayiates

Reputation: 11230

Set your interval to 1/10 current and then adjust your draw increment of 20 down to 2, and the animation is much smoother.

JSFiddle here.

var drawAmount = 0;
var interval = 0;
setInterval(
     function(){   
         interval = interval + 1;
         if ( interval >= 5 ) {
             drawAmount = drawAmount - 2;
             draw(drawAmount);
         }
         else {
              drawAmount = drawAmount + 2;
              draw(drawAmount);
         }
     },
     100  /* 10000 ms = 10 sec */
);

Upvotes: 1

Manoj Dhiman
Manoj Dhiman

Reputation: 5166

you can use likejsfiddle this 

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
    $('.radial-progress').attr('data-progress', Math.floor(100));
}

setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

Upvotes: 0

Related Questions