How to create a CSS & Javascript based Fuel Bar animations for Survey

JavaScript
1

Hello,

How to we make very nice looking fuel bar animations in
Javascript & CSS that is triggered by the user making a selection?

To be exact, here is what we are looking for:

1- User sees a Poll (Survey) with 4 multiple choices of A, B, C & D

2- She clicks on Choice B

3- This choice is communicated to the server via Ajax
to a Php program

4- Php program via Ajax tells the users Web browser that
for example Choice A is selected by 20%, B by 40%,
C by 20% and D by 20%

5- The Javascript function is then called which along
with CSS displays to the user an animation for each of the choices
A through D

We know how to do Steps 1 through 4,
what we are looking help with is how to do Step # 5, that is the Javascript function along with CSS code which would display to the User in Animated fashion Choices A through D of the Survey results, with each fuel bar rising in a different color from A through D in order

Thanks
Dean

2

CSS can do the animation on it’s own, all JS has to do is guide it. Here’s a working example:

<!DOCTYPE html>
<html>
<style>
.bar {
    width: 20em;
    height: 1em;
    border: 1px solid black;
    margin: 1em;
}

.bar::before {
    display: block;
    content: '';
    width: 0;
    height: 100%;
    transition: width 1s ease-in-out;
}


#one { background: #fee; }
#one::before { background: #f00; }
#two { background: #efe; }
#two::before { background: #0f0; }
#three { background: #eef; }
#three::before { background: #00f; }
#four { background: #fef; }
#four::before { background: #f0f; }

</style>
<body>
    <div id="one" class="bar"></div>
    <div id="two" class="bar"></div>
    <div id="three" class="bar"></div>
    <div id="four" class="bar"></div>
    <button id="play">Go</button>
    <style id="change"></style>
</body>
<script>
document.getElementById('play').addEventListener('click', function(){
    document.getElementById('change').innerHTML = '#one::before{width: 60%;}\n'
    +'#two::before{width: 25%;}\n'
    +'#three::before{width: 10%;}\n'
    +'#four::before{width: 5%;}';
});
</script>
</html>

I didn’t use JSFiddle because it throws a fit if you try to place CSS in the HTML document. Unfortunately, this technique relies on this. You can place the CSS that appears in the header in a separate file and in a real life application should, but the style tag with the id of “change” must remain inline.

This technique require that inline stylesheet because if you set the css property of the element directly the animation won’t play. You must therefore change it by applying a new rule using a style element.

The advantages of this technique over standard JavaScript animating are these:

  1. The syntax is easier to follow and less verbose.
  2. No 3rd party library is needed.
  3. CSS animations are GPU bound where JavaScript animations are CPU bound. This means they play far more smoothly.

While the animations above are simultaneous, you can modify the CSS rules further to get each bar to grow one at a time quite easily.

3 Likes
3

Hello Mike,

Can you point me to an Online Example of this CSS based Animation, to make sure that it works exactly as what we are looking for and that it works same across Web browsers.

Much thanks.

Dean

4

Copy the code above into an html file and open it in your browser.

1 Like
5

Mike,
I did that. And it does display the animation technically OK.
But I need the animation to be more professional looking, such as each choice bar to have rounded corners and a 3D look & feel plus more vibrant colors.

Can you help with that?

Thanks
Dean

6

Isn’t that something you as a designer should be doing?

Or perhaps you’re looking for the Jobs category?

3 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.