loading image spinner

[unkl]

Some of my image files are a bit big so there is blank area for a bit. I am not much of a coder, is there a way to load a simple spinner before the image displays?

Something like this:
http://www.aplusdesign.com.au/blog/jquery-ajax-loader-spinner/

[marcandre]

I agree it should be easier to add a spinner... Stay tuned

[perludum]

oh cool, I would love to see a simple loading spinner on featherlight. Otherwise when opening images for the first time it looks like a little glitch indeed.

P.S.: Did a few days of research on what's the best lightbox (gallery). Featherlight it is.

[marcandre]

I pushed a commit that should make it easy to use a spinner. Use the featherlight-loading class to tweak the CSS to your needs (e.g. removing the background, etc...) and specify a loading option with the html of your spinner.

Please report back if that seems like a good solution!

[perludum]

Thank you very much, that's really great!!
The spinner works nicely and the way the .featherlight-loading class is being used gives a lot of possibilities. Today I did a lot of testing with this option and I'm happy it also works with the gallery!

P.S.: I think the following line should be added to the featherlight.gallery.css to keep away the prev and next buttons from the spinner:

.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {display:none;}

[marcandre]

@per-ludum Thanks for the feedback 👍 and the css suggestion (merged)

[alexdpunkt]

You can re-use the featherlight-close-icon as a loading spinner while the featherlight-loading class is applied.
Pretty nice as it can be accomplished with pure CSS - no additional HTML, script or images needed.

.featherlight-loading {

    .featherlight-content {
        min-height: 150px;
        overflow: hidden !important;
        position: relative;
        .featherlight-close-icon {
            position: absolute;
            display: block;
            left: 50%;
            top: 50%;
            margin-left: -30px;
            margin-top: -30px;
            animation: rotation 800ms infinite linear;
            border: 4px solid rgba(0, 0, 0, 0.2);
            border-left-color: #000;
            width: 60px;
            height: 60px;
            border-radius: 60px;
            text-indent: -10000px;
        }
    }
}



@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

[marcandre]

Thanks @adick I added a ref in the wiki page