skyquake/framework/widgets/loading-indicator/loading-indicator-animations.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 .line-scale-pulse-out-rapid > div {
  20   background-color: #fff;
  21   width: 4px;
  22   height: 2rem;
  23   border-radius: 2px;
  24   margin: 2px;
  25   animation-fill-mode: both;
  26   display: inline-block;
  27   animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); }
  28   .line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {
  29     animation-delay: -0.25s !important; }
  30   .line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {
  31     animation-delay: 0s !important; }
  32
  33
  34 .loader-animation-enter, .loader-animation-appear {
  35   opacity: 0.01;
  36 }
  37
  38 .loader-animation-enter.loader-animation-enter-active, .loader-animation-appear.loader-animation-appear-active {
  39   opacity: 1.0;
  40   transition: opacity 300ms ease-in;
  41 }
  42
  43 .loader-animation-leave {
  44   visibility:hidden;
  45   height:0px;
  46   width:0px;
  47   opacity:1.0;
  48 }
  49
  50 .loader-animation-leave.loader-animation-leave-active {
  51   opacity:0;
  52   transition: opacity 300ms ease-in;
  53 }