Trying to get a progress spinner to fade in using CSS

Question

I am trying to get a spinner to fade in. I am using this progress spinner: JQuery Progress Spinner

It allows one to specify a CSS class to add CSS effects, which I have called spinner.

My CSS for the spinner class is :

.spinner {
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
  transition: opacity 2s linear;
  border: 1px solid red;
}

But it does not work. I am using this with Ajax, and if the response is < 1 sec then I do not want the progress spinner, so in this case it will not have faded in. Except it does, so I get the spinner appearing for about 50ms which is not ideal.

I guess there is something, rather trivial, that is incorrect with my CSS.

EDIT 1:

I am transitioning from transparent(white which is my background colour) to the spinner.

You're "transitioning" what is it transitioning from? You'll need to toggle a class on it or something that's opacity: 0; to opacity: 1; — Mathias Rechtzigel
– Mathias Rechtzigel, Commented Jul 21, 2014 at 15:31

Johansrk · Accepted Answer · 2014-07-21 15:37:17Z

2

Add an active class to spinner, when ajax completes. And add the following css.

spinner {
  opacity: 0;
 -moz-transition: opacity 2s linear;
 -o-transition: opacity 2s linear;
 -webkit-transition: opacity 2s linear;
 transition: opacity 2s linear;
 border: 1px solid red;
}
.spinner.active {
  opacity: 1;
}

answered Jul 21, 2014 at 15:37

Johansrk

5,2803 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SamJolly Over a year ago

Thanks for this. Is there not a way to have one class and just delay the display of the image, over say 2secs

Marko Gresak · Accepted Answer · 2014-07-21 15:42:40Z

1

Your CSS is correct, you only lack logic to know when to hide the .spinner. You could use something like this:

/* CSS */
.spinner {
    -webkit-transition: opacity 2s linear;
       -moz-transition: opacity 2s linear;
         -o-transition: opacity 2s linear;
            transition: opacity 2s linear;
    border: 1px solid red;
    opacity: 1.0;
}

.hidden {
    opacity: 0.0;
}

And add a call to hide the .spinner. This example hides it when button is clicked, you could use ajax().done() to work with your code.

// JavaScript
$("#hide").click(function () {
    $("#foo").addClass("hidden");
});

I have set up an example on this JSFiddle.

answered Jul 21, 2014 at 15:42

Marko Gresak

8,2676 gold badges43 silver badges49 bronze badges

4 Comments

SamJolly Over a year ago

Thanks for this. Should I not be able to get the spinner just fading in over 2 seconds, when displayed. I never see this.

Marko Gresak Over a year ago

I don't know exactly what you mean by fading in, it does fade in time span of 2 seconds. After some testing, I've noticed that this doesn't work in IE for some reason, even with the old IE fixes. Another fallback you could use is $("selector").fadeOut(2000);. With jQuery .fadeOut function, you don't need any css at all.

SamJolly Over a year ago

Thanks for the reply, basically I mean from white, which is the colour of the background, so I guess that is transparent to the colour of the image. If this was an animated gif, then the gif would get darker and darker from white.

Marko Gresak Over a year ago

This should work the same, be it an dom element (current example) or an image.

Mathias Rechtzigel · Accepted Answer · 2014-07-21 15:40:37Z

You'll also have to toggle a class that is controlling the "opacity" css attribute.

JSFiddle of how opacity and transitions work.

.spinnerDummy{
    height: 100px;
    width: 100px;
    background:blue;
    border-radius: 100px;
    opacity: 0;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    -webkit-transition: opacity 2s linear;
    transition: opacity 2s linear;
}

spinnerDummy.opacity{
    opacity: 1;
}

You could also set a timeout function on your loading gif:

setTimeout(function() {
 $('.spinnerDummyFadeIn').addClass('opacity');
}, 1000 );

Example

Chris · Accepted Answer · 2014-07-21 17:07:04Z

jsfiddle

You could use an animation like in the above link. Click Run to watch the animation again.

I created a custom animation, in this case myfirst, and then attached it to the class I wanted to display the animation on, .fade.

Define animation:

@keyframes myfirst {
from {opacity: 0}
to {opacity: 1}
}

Attach it and assign length of animation:

.fade{
    animation: myfirst 1s;
}

Put the keyframes part anywhere in your CSS and then attach the .fade class to your spinner. The code in my jsfiddle is what you should be using for optimal compatibility.

Animations on W3C

Collectives™ on Stack Overflow

Trying to get a progress spinner to fade in using CSS

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Linked

Related