yaffs.net Git - yaffs-website/blob - web/modules/contrib/blazy/css/components/blazy.loading.css

   1 /**
   2  * @file
   3  */
   4
   5 /* Credit: https://github.com/tobiasahlin/SpinKit */
   6 @-webkit-keyframes rotateplane {
   7   0% {
   8     -webkit-transform: perspective(120px);
   9   }
  10   50% {
  11     -webkit-transform: perspective(120px) rotateY(180deg);
  12   }
  13   100% {
  14     -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  15   }
  16 }
  17
  18 @keyframes rotateplane {
  19   0% {
  20     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  21   }
  22   50% {
  23     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  24   }
  25   100% {
  26     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  27   }
  28 }
  29
  30 /* The lazyloaded element: IMG, IFRAME, DIV. */
  31 .b-lazy,
  32 .b-responsive {
  33   display: block;
  34   opacity: 0;
  35   -webkit-transition: opacity 500ms ease-in-out;
  36   transition: opacity 500ms ease-in-out;
  37 }
  38
  39 /* Needed to display preloader with CSS BG image, otherwise hidden. */
  40 .b-loaded,
  41 .media--loading.media--background {
  42   opacity: 1;
  43 }
  44
  45 .media--loading {
  46   -webkit-backface-visibility: hidden;
  47   backface-visibility: hidden;
  48   position: relative;
  49 }
  50
  51 .media--loading::before {
  52   content: '';
  53   display: block;
  54   width: 30px;
  55   height: 30px;
  56   max-width: 30px;
  57   background: #2eaae0;
  58   position: absolute;
  59   left: 50%;
  60   top: 50%;
  61   margin-left: -15px;
  62   margin-top: -15px;
  63   font-size: 0;
  64   z-index: 22;
  65   -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  66   animation: rotateplane 1.2s infinite ease-in-out;
  67 }
  68
  69 .media--background {
  70   background-size: cover;
  71   background-position: center center;
  72   background-repeat: no-repeat;
  73 }