// Variable $fluidbox__transition-duration: .5s !default; $fluidbox__overlay-bg-color: rgba(255,255,255,.85) !default; $fluidbox__animation-bg-color: $fluidbox__overlay-bg-color !default;

// Animation @keyframes fluidboxLoading {

0%              { transform: translate(-50%, -50%) rotateX(0)           rotateY(0);                     }
50%             { transform: translate(-50%, -50%) rotateX(-180deg)     rotateY(0);                     }
100%    { transform: translate(-50%, -50%) rotateX(-180deg)     rotateY(-180deg);       }

}

// Rules .fluidbox {

outline: none;

} .fluidbox__overlay {

background-color: $fluidbox__overlay-bg-color;
cursor: pointer;
cursor: zoom-out;
opacity: 0;
pointer-events: none;
position: fixed;
top: -100%;             /* Negative top and bottom is to fix some Safari cases where image got blurry */
left: 0;
bottom: -100%;  /* Negative top and bottom is to fix some Safari cases where image got blurry */
right: 0;
/* Transition time for overlay is halved to ensure that flickering doesn't happen */
transition: all $fluidbox__transition-duration ease-in-out;

.fluidbox--opened & { pointer-events: auto;}

} .fluidbox__wrap {

background-position: center center;
background-size: cover;
margin: 0 auto;
position: relative;
transition: all $fluidbox__transition-duration ease-in-out;

} .fluidbox__thumb {

transition: opacity 0s ease-in-out 0s;
/* To prevent flickering, we delay the showing of the image */
.fluidbox--closed & { transition: opacity 0s ease-in-out 0s; }

} .fluidbox__ghost {

background-size: 100% 100%;
background-position: center center;     
background-repeat: no-repeat;
position: absolute;
transition: opacity 0s 0s, transform $fluidbox__transition-duration 0s;

.fluidbox--opened & {
        cursor: pointer;
        cursor: -webkit-zoom-out;
        cursor: -moz-zoom-out;
        cursor: zoom-out;
}
.fluidbox--closed & {
        transition: opacity 0s $fluidbox__transition-duration, transform $fluidbox__transition-duration 0s;
}

} .fluidbox__loader {

opacity: 0;
perspective: 200px;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

&::before {
        /* You can replace this with any color you want, or even a loading gif if desired */
        background-color: $fluidbox__animation-bg-color;
        content: '';
        transform-style: preserve-3d;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20%;
        padding-bottom: 20%;
        transform: translate(-50%, -50%);
        transition-property: transform;
        transition-duration: $fluidbox__transition-duration;
        transition-delay: 0s;
}

}

.fluidbox–loading .fluidbox__loader {

opacity: 1;
transition: opacity $fluidbox__transition-duration ease-in-out $fluidbox__transition-duration;
&::before {
        animation: fluidboxLoading 1s 0s infinite ease-in-out forwards;
}

}