I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a hover action trigger. You can view the example by hovering over the icon: http://jsfiddle.net/77gkzqo2/
The initial CSS for the "beer" shows an empty glass:
border-top:2px solid #F9F1DC;
height:20%;
At the end of the animation, it should appear as:
border-top:14px solid #F9F1DC;
height:68%;
I am seeking guidance on how to increment these values using jQuery or JavaScript. The border difference is 12 pixels, and the height percentage difference is 48%.
I envision increasing the border size by 4 pixels and the height percentage by 16% every second, so it takes 3 seconds to reach the final appearance.
I am struggling to implement this in JavaScript. I have some basic pseudo code, but unsure if it's correct or how to proceed further.
function addCSS(){
// Increment each value
var height = [The current height CSS]
var border = [The current border CSS]
var newHeight = height + 16;
var newBorder = border + 4;
[set newHeight as .filler's height]
[set newBorder as .fillers border size]
}
setInterval('addCSS();', 1000);