resources/src/mediawiki.pulsatingdot/mediawiki.pulsatingdot.less

   1 @import 'mediawiki.skin.variables.less';
   2
   3 .mw-pulsating-dot {
   4         &::before,
   5         &::after {
   6                 content: '';
   7                 display: block;
   8                 position: absolute;
   9                 border-radius: @border-radius-circle;
  10                 background-color: @background-color-progressive;
  11         }
  12
  13         &::before {
  14                 width: 36px;
  15                 height: 36px;
  16                 top: -18px;
  17                 left: -18px;
  18                 opacity: 0;
  19                 animation: mw-pulsating-dot-pulse 3s ease-out;
  20                 animation-iteration-count: infinite;
  21         }
  22
  23         &::after {
  24                 width: 12px;
  25                 height: 12px;
  26                 top: -6px;
  27                 left: -6px;
  28         }
  29 }
  30
  31 .mw-pulsating-dot-pulse-frames() {
  32         0% {
  33                 transform: scale( 0 );
  34                 opacity: 0;
  35         }
  36
  37         25% {
  38                 transform: scale( 0 );
  39                 opacity: 0.1;
  40         }
  41
  42         50% {
  43                 transform: scale( 0.1 );
  44                 opacity: 0.3;
  45         }
  46
  47         75% {
  48                 transform: scale( 0.5 );
  49                 opacity: 0.5;
  50         }
  51
  52         100% {
  53                 transform: scale( 1 );
  54                 opacity: 0;
  55         }
  56 }
  57
  58 @keyframes mw-pulsating-dot-pulse {
  59         .mw-pulsating-dot-pulse-frames;
  60 }