blazy.loading.css in Blazy 8.2
File
css/components/blazy.loading.css
View source
- /**
- * @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);
- }
- }
-
- /* @todo deprecated and removed media--loading for is-b-loading to make sense outside media. */
- .media--loading,
- .is-b-loading {
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- position: relative;
- min-height: 30px;
- }
-
- /* Prevents costly double animations when Blur is enabled. */
- .media--loading:not([data-animation])::before,
- .is-b-loading:not([data-animation])::before {
- content: '';
- display: block;
- 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;
- }
-
- /**
- * With JS being disabled, the NOSCRIPT tag is replaced by SPAN.
- * No worries about video iframes, they are broken without JS anyway.
- * Hide JS stuffs when being disabled. Ensures to not mess up JS users.
- */
- .media--loading > span + .b-lazy,
- .media--loading > span + picture,
- .media--loading > span + a,
- .media--loading.media--player > span ~ .b-lazy,
- .is-b-loading > span + .b-lazy,
- .is-b-loading > span + picture,
- .is-b-loading > span + a,
- .is-b-loading.media--player > span ~ .b-lazy {
- display: none;
- }