Question

I have two main elements – some text with a select box on one line, and a div with a gif spinner image on another line. Initially, I am setting the spinner to display:none.

Even though this is part of a larger enterprise application (so event handling etc isn’t really a question here). But what I want to do it whenever some event occurs (i.e. a button click):

1. the hidden spinner element moves over to guarantee full coverage of the line with the text + the select box, without making the line bigger overall – it should ideally just fit into the exact space that the text + select box cover
2. Smoothly fade in the spinner and fade out the background element to 100% white

http://jsfiddle.net/Dh4vb/15/
Code:

<div id="wrapper">
    on the <select id="select"></select> of the Month
<div id="spinner"></div>
</div>​

#wrapper {
    margin: 50px;
}

#spinner {
    width: 150px;
    height: 25px;
    background-image: url('http://fedoraproject.org/w/uploads/2/29/Artwork_DesignService_fedora-spinner.gif');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    display:none;
}

​

Answer 1

You can see it work here: http://jsfiddle.net/jfriend00/8MJH4/. I made the transition time longer in the demo so you can more clearly see the transition working. Here’s a slightly more advanced version that works as a toggle: http://jsfiddle.net/jfriend00/kwr4m/.

The idea is that you position the spinner with absolute position (so it’s over the top of the text), but initially opacity: 0 so not visible. Then, you change the opacity of the text to 0 and the opacity of the spinner to 1 and both are set for an opacity CSS transition. Here’s the code:

JS:

function run() {
    var spinner = document.getElementById("spinner");
    var fadeText = document.getElementById("fadeText"); 

    // make spinner visible
    spinner.style.opacity = 1;

    // make text not visible
    fadeText.style.opacity = 0;
}​

HTML:

<button id="go" onclick="run()">Go</button>
<div id="wrapper">
    <div id="fadeText" class="fadeTransition">
    on the <select id="select"></select> of the Month
    </div>
    <div id="spinner" class="fadeTransition"></div>
</div>​

CSS:

#wrapper {
    margin: 50px;
    position: relative;
}

#spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0;
    width: 150px;
    height: 25px;
    background-image: url('http://fedoraproject.org/w/uploads/2/29/Artwork_DesignService_fedora-spinner.gif');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 
}

.fadeTransition {
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}
​