otf-frontend/client/src/styles/_spinner.scss

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 .spinner {\r
  18     position: absolute;\r
  19     top: 50%;\r
  20     left: 50%;\r
  21     -ms-transform: translate(-50%,-50%); /* IE 9 */\r
  22     -webkit-transform: translate(-50%,-50%); /* Safari */\r
  23     transform: translate(-50%,-50%); /* Standard syntax */\r
  24     width: 70px;\r
  25     height: 70px;\r
  26     > div {\r
  27         width: 18px;\r
  28         height: 18px;\r
  29         background-color: #333;\r
  30 \r
  31         border-radius: 100%;\r
  32         display: inline-block;\r
  33         -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;\r
  34         animation: sk-bouncedelay 1.4s infinite ease-in-out both;\r
  35     }\r
  36     .bounce1 {\r
  37         -webkit-animation-delay: -0.32s;\r
  38         animation-delay: -0.32s;\r
  39     }\r
  40 \r
  41     .bounce2 {\r
  42         -webkit-animation-delay: -0.16s;\r
  43         animation-delay: -0.16s;\r
  44     }\r
  45 }\r
  46 \r
  47 @-webkit-keyframes sk-bouncedelay {\r
  48     0%, 80%, 100% { -webkit-transform: scale(0) }\r
  49     40% { -webkit-transform: scale(1.0) }\r
  50 }\r
  51 \r
  52 @keyframes sk-bouncedelay {\r
  53     0%, 80%, 100% {\r
  54         -webkit-transform: scale(0);\r
  55         transform: scale(0);\r
  56     } 40% {\r
  57         -webkit-transform: scale(1.0);\r
  58         transform: scale(1.0);\r
  59     }\r
  60 }\r