coriolis-web/src/components/LoadingIcon/LoadingIcon.scss

/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';
$loader-offset:         0.2;
$base-opacity:          0.3;

@keyframes :global(anim) {
  0% {
    fill-opacity: $base-opacity;
  }
  20% {
    fill-opacity: 1.2;
  }
  50% {
    fill-opacity: 0.5;
  }
  100% {
    fill-opacity: 0;
  }
}

.root {
  text-align: center;
  padding: 16px;
  :global {
    #loadingIcon {
      bottom: 10%;
      width: 100%;
      height: 100%;
      path {
        animation: anim 2.1s ease-out infinite;
      }
      #Fill-1 { animation-delay: 0s; fill-opacity: $base-opacity;}
      #Fill-2 { animation-delay: -0.1s; fill-opacity: $base-opacity; }
      #Fill-3 { animation-delay: -0.2s; fill-opacity: $base-opacity;}
      #Fill-4 { animation-delay: -0.3s; fill-opacity: $base-opacity;}
      #Fill-5 { animation-delay: -0.4s; fill-opacity: $base-opacity;}
      #Fill-6 { animation-delay: -0.5s; fill-opacity: $base-opacity;}
      #Fill-7 { animation-delay: -0.6s; fill-opacity: $base-opacity;}
      #Fill-8 { animation-delay: -0.7s; fill-opacity: $base-opacity;}
      #Fill-9 { animation-delay: -0.8s; fill-opacity: $base-opacity;}
      #Fill-10 { animation-delay: -0.9s; fill-opacity: $base-opacity;}
      #Fill-11 { animation-delay: -1s; fill-opacity: $base-opacity;}
    }
    .noAnimation {
      #loadingIcon {
        path {
          animation: none;
        }
        #Fill-1 { animation-delay: 0s; fill-opacity: 1;}
        #Fill-2 { animation-delay: -0.1s; fill-opacity: 1; }
        #Fill-3 { animation-delay: -0.2s; fill-opacity: 1;}
        #Fill-4 { animation-delay: -0.3s; fill-opacity: 1;}
        #Fill-5 { animation-delay: -0.4s; fill-opacity: 1;}
        #Fill-6 { animation-delay: -0.5s; fill-opacity: 1;}
        #Fill-7 { animation-delay: -0.6s; fill-opacity: 1;}
        #Fill-8 { animation-delay: -0.7s; fill-opacity: 1;}
        #Fill-9 { animation-delay: -0.8s; fill-opacity: 1;}
        #Fill-10 { animation-delay: -0.9s; fill-opacity: 1;}
        #Fill-11 { animation-delay: -1s; fill-opacity: 1;}
      }
    }
  }
  .text {
    font-size: 18px;
    text-align: center;
    margin-top: 16px;
  }
}