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

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