v1/web/modules/contrib/blazy/css/components/blazy.loading.css

67 lines
1.5 KiB
CSS

/**
* @file
*/
/* Credit: https://github.com/tobiasahlin/SpinKit */
@-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px);
transform: perspective(120px);
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg);
transform: perspective(120px) rotateY(180deg);
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
transform: perspective(120px) rotateY(180deg) rotateX(180deg);
}
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.is-b-loading:not(.is-b-loaded) {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
min-height: 30px;
}
/* Hide for non-js users. */
.is-b-loading:not(.is-b-loaded)::before {
display: none;
}
/* Core drupal.init.js provides this .js class for free as long as loaded. */
.js .is-b-loading:not(.is-b-loaded)::before {
display: block;
}
/* Prevents costly double animations when Blur is enabled. */
.is-b-loading:not(.is-b-loaded):not([data-animation])::before {
content: '';
width: 30px;
height: 30px;
max-width: 30px;
background: #2eaae0;
position: absolute;
left: 50%;
top: 50%;
margin-left: -15px;
margin-top: -15px;
font-size: 0;
z-index: 22;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}