Animate linear-gradient using jQuery script

Question

Animate linear-gradient using jQuery script

I have been searching for a circular progress bar plugin but haven't found one that suits my needs, so I decided to build my own using pure CSS:

http://jsfiddle.net/9RFkw/

While it looks great, there are two issues I am facing:

1.) When at 25% in Firefox V28.Final, the progress bar shows an unwanted border. How can I resolve this?

2.) I would like to incorporate a jQuery script to animate the progress (the gradient). The challenge is making sure the linear-gradient has a consistent structure during animation. Is there a way to achieve this similar to how I created the example using CSS?

var start = 0;
var end   = 75;

// Animate linear-gradient from 0 to 75%
$('#progressbar').animate({

});

Thank you!

jquery css css-animations progress

Answer 1

Answer №1

Start off by entering a percentage value in the input field to witness the circle animation.

Check out the Demo Fiddle

HTML Code:

<svg viewbox="0 0 80 80" height="100" width="100>
    <circle cx="40" cy="40" r="38" stroke="blue" fill="none" stroke-width="3" stroke-dasharray="239" stroke-dashoffset="239" />
</svg>
<br />
<input placeholder='Enter a number between 1-100..' type='number' />

CSS Styling:

svg {
    width: 80px;
}
circle {
    transition: all 1s ease;
    border:1px solid black;
}

Using jQuery:

$('input').on('keyup', function () {
    var perc = 239 - (239 * ($(this).val() / 100));
    perc=(perc > 239) ? perc = 239 : ((perc < 0) ? perc=0: perc);
    $('circle').css('stroke-dashoffset', perc);
});

Answer 2

Start off by entering a percentage value in the input field to witness the circle animation.

Check out the Demo Fiddle

HTML Code:

<svg viewbox="0 0 80 80" height="100" width="100>
    <circle cx="40" cy="40" r="38" stroke="blue" fill="none" stroke-width="3" stroke-dasharray="239" stroke-dashoffset="239" />
</svg>
<br />
<input placeholder='Enter a number between 1-100..' type='number' />

CSS Styling:

svg {
    width: 80px;
}
circle {
    transition: all 1s ease;
    border:1px solid black;
}

Using jQuery:

$('input').on('keyup', function () {
    var perc = 239 - (239 * ($(this).val() / 100));
    perc=(perc > 239) ? perc = 239 : ((perc < 0) ? perc=0: perc);
    $('circle').css('stroke-dashoffset', perc);
});

Animate linear-gradient using jQuery script

Answer №1

Check out the Demo Fiddle

Similar questions

Library of CSS styling information

What is the best way to dynamically insert an image into an <li> element?

Concealing a Div on Click Outside of Child Div in ReactJS

Scrolling through image galleries with automatic thumbnails

What is the best way to position a button to the right side of the screen?

Troubleshooting the issue with padding in CSS not working when using window.print()

Leverage the power of PHP array values in your Javascript code

Tips for displaying a refresh indicator while making an ajax call for refreshing data:

When I click the button, I would like the value of the button to be displayed in a textbox

ASP Mvc 3 does not have the ability to automatically bind from a JSON post request

Preventing CSS shapes from overlapping with the next DIV

The JavaScript function's if and else statements are being executed simultaneously

I'm curious about where to find more information on this new technology called the 'scroll to page' feature

Removing margins from the footer and header after adding a video background: A step-by-step guide

Error messages arising from JSON files generated by PHP

Designing an advanced remote upload system using jQuery AJAX and PHP

Incorporate validation features within a jQuery method

Verifying if a number is present in a textbox when inserting text (without using setTimeout)

Adding a background image to a box in MUI is a simple task that can enhance

A method in JavaScript to fetch a single variable using the GET request