jQuery/CSS add fade-in and fade out effect

Question

I have made 3 css classes which look like this:

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url('') 50% 50% no-repeat;
    background-image: url('../../images/gears.svg');
}

body.loading {
    overflow: hidden;
}

    body.loading .modal {
        display: block;
    }

Upon jQuery event onclick I display to the end user so the user knows something's happening.

What I don't like here is that the loading appears very forcingly , there is no smoothness in transition when it appears and when it disappears. What I do to show the loading gears to user is:

$body = $("body");

And then to display it:

$body.addClass("loading");

Or to remove it:

$body.removeClass("loading");

How can I add smooth transition of when the loading gears appear and disappear using jquery or CSS so that the animation looks more friendly?

Can someone help me out ?

P.S. If you guys have your own ideas how I could make it look better, please post your opinion/solutions, I'd love to see & read it =) — User987
– User987, Commented Feb 19, 2017 at 17:12

Zach Shallbetter · Accepted Answer · 2017-02-19 17:22:57Z

4

I would remove display: none then just use a css transition to fade in the container. You can also just add the class to the modal instead of to the body.

.loader {
  visibility: hidden;
  opacity: 0;
}

.loader.visible {
   opacity: 1;
   visibility: visible;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

answered Feb 19, 2017 at 17:22

Zach Shallbetter

1,9216 gold badges23 silver badges38 bronze badges

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

Comments

Michael Coker · Accepted Answer · 2017-02-19 17:56:16Z

2

Aside from using CSS transitions with opacity or visibility you can also just use jQuery to show/hide the loader. I would recommend Zach's CSS solution as it's simpler and more performant, but this is an alternative.

 .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8 ) url('') 50% 50% no-repeat;
  background-image: url('../../images/gears.svg');
}
body.loading {
  overflow: hidden;
}

$('body').addClass('loading');

/* fade loader in */
$('.modal').fadeIn('fast');

/* fade loader out */
$('.modal').fadeOut('fast', function() {
  $('body').removeClass('loading');
});

answered Feb 19, 2017 at 17:56

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Collectives™ on Stack Overflow

jQuery/CSS add fade-in and fade out effect

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related