github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_preloader.scss (about)

     1  /*
     2      @license
     3      Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
     4      This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
     5      The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
     6      The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
     7      Code distributed by Google as part of the polymer project is also
     8      subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
     9   */
    10  
    11  /**************************/
    12  /* STYLES FOR THE SPINNER */
    13  /**************************/
    14  
    15  /*
    16   * Constants:
    17   *      STROKEWIDTH = 3px
    18   *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
    19   *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
    20   *      ARCSTARTROT = 216 degrees (how much the start location of the arc
    21   *                                should rotate each time, 216 gives us a
    22   *                                5 pointed star shape (it's 360/5 * 3).
    23   *                                For a 7 pointed star, we might do
    24   *                                360/7 * 3 = 154.286)
    25   *      CONTAINERWIDTH = 28px
    26   *      SHRINK_TIME = 400ms
    27   */
    28  
    29  
    30  .preloader-wrapper {
    31    display: inline-block;
    32    position: relative;
    33    width: 50px;
    34    height: 50px;
    35  
    36    &.small {
    37      width: 36px;
    38      height: 36px;
    39    }
    40  
    41    &.big {
    42      width: 64px;
    43      height: 64px;
    44    }
    45  
    46    &.active {
    47      /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
    48      -webkit-animation: container-rotate 1568ms linear infinite;
    49      animation: container-rotate 1568ms linear infinite;
    50    }
    51  }
    52  
    53  @-webkit-keyframes container-rotate {
    54    to { -webkit-transform: rotate(360deg) }
    55  }
    56  
    57  @keyframes container-rotate {
    58    to { transform: rotate(360deg) }
    59  }
    60  
    61  .spinner-layer {
    62    position: absolute;
    63    width: 100%;
    64    height: 100%;
    65    opacity: 0;
    66    border-color: $spinner-default-color;
    67  }
    68  
    69  .spinner-blue,
    70  .spinner-blue-only {
    71    border-color: #4285f4;
    72  }
    73  
    74  .spinner-red,
    75  .spinner-red-only {
    76    border-color: #db4437;
    77  }
    78  
    79  .spinner-yellow,
    80  .spinner-yellow-only {
    81    border-color: #f4b400;
    82  }
    83  
    84  .spinner-green,
    85  .spinner-green-only {
    86    border-color: #0f9d58;
    87  }
    88  
    89  /**
    90   * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
    91   *
    92   * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
    93   * guarantee that the animation will start _exactly_ after that value. So we avoid using
    94   * animation-delay and instead set custom keyframes for each color (as redundant as it
    95   * seems).
    96   *
    97   * We write out each animation in full (instead of separating animation-name,
    98   * animation-duration, etc.) because under the polyfill, Safari does not recognize those
    99   * specific properties properly, treats them as -webkit-animation, and overrides the
   100   * other animation rules. See https://github.com/Polymer/platform/issues/53.
   101   */
   102  .active .spinner-layer.spinner-blue {
   103    /* durations: 4 * ARCTIME */
   104    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   105    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   106  }
   107  
   108  .active .spinner-layer.spinner-red {
   109    /* durations: 4 * ARCTIME */
   110    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   111    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   112  }
   113  
   114  .active .spinner-layer.spinner-yellow {
   115    /* durations: 4 * ARCTIME */
   116    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   117    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   118  }
   119  
   120  .active .spinner-layer.spinner-green {
   121    /* durations: 4 * ARCTIME */
   122    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   123    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   124  }
   125  
   126  .active .spinner-layer,
   127  .active .spinner-layer.spinner-blue-only,
   128  .active .spinner-layer.spinner-red-only,
   129  .active .spinner-layer.spinner-yellow-only,
   130  .active .spinner-layer.spinner-green-only {
   131    /* durations: 4 * ARCTIME */
   132    opacity: 1;
   133    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   134    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   135  }
   136  
   137  @-webkit-keyframes fill-unfill-rotate {
   138    12.5% { -webkit-transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
   139    25%   { -webkit-transform: rotate(270deg);  } /* 1   * ARCSIZE */
   140    37.5% { -webkit-transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
   141    50%   { -webkit-transform: rotate(540deg);  } /* 2   * ARCSIZE */
   142    62.5% { -webkit-transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
   143    75%   { -webkit-transform: rotate(810deg);  } /* 3   * ARCSIZE */
   144    87.5% { -webkit-transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
   145    to    { -webkit-transform: rotate(1080deg); } /* 4   * ARCSIZE */
   146  }
   147  
   148  @keyframes fill-unfill-rotate {
   149    12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
   150    25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
   151    37.5% { transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
   152    50%   { transform: rotate(540deg);  } /* 2   * ARCSIZE */
   153    62.5% { transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
   154    75%   { transform: rotate(810deg);  } /* 3   * ARCSIZE */
   155    87.5% { transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
   156    to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
   157  }
   158  
   159  @-webkit-keyframes blue-fade-in-out {
   160    from { opacity: 1; }
   161    25% { opacity: 1; }
   162    26% { opacity: 0; }
   163    89% { opacity: 0; }
   164    90% { opacity: 1; }
   165    100% { opacity: 1; }
   166  }
   167  
   168  @keyframes blue-fade-in-out {
   169    from { opacity: 1; }
   170    25% { opacity: 1; }
   171    26% { opacity: 0; }
   172    89% { opacity: 0; }
   173    90% { opacity: 1; }
   174    100% { opacity: 1; }
   175  }
   176  
   177  @-webkit-keyframes red-fade-in-out {
   178    from { opacity: 0; }
   179    15% { opacity: 0; }
   180    25% { opacity: 1; }
   181    50% { opacity: 1; }
   182    51% { opacity: 0; }
   183  }
   184  
   185  @keyframes red-fade-in-out {
   186    from { opacity: 0; }
   187    15% { opacity: 0; }
   188    25% { opacity: 1; }
   189    50% { opacity: 1; }
   190    51% { opacity: 0; }
   191  }
   192  
   193  @-webkit-keyframes yellow-fade-in-out {
   194    from { opacity: 0; }
   195    40% { opacity: 0; }
   196    50% { opacity: 1; }
   197    75% { opacity: 1; }
   198    76% { opacity: 0; }
   199  }
   200  
   201  @keyframes yellow-fade-in-out {
   202    from { opacity: 0; }
   203    40% { opacity: 0; }
   204    50% { opacity: 1; }
   205    75% { opacity: 1; }
   206    76% { opacity: 0; }
   207  }
   208  
   209  @-webkit-keyframes green-fade-in-out {
   210    from { opacity: 0; }
   211    65% { opacity: 0; }
   212    75% { opacity: 1; }
   213    90% { opacity: 1; }
   214    100% { opacity: 0; }
   215  }
   216  
   217  @keyframes green-fade-in-out {
   218    from { opacity: 0; }
   219    65% { opacity: 0; }
   220    75% { opacity: 1; }
   221    90% { opacity: 1; }
   222    100% { opacity: 0; }
   223  }
   224  
   225  /**
   226   * Patch the gap that appear between the two adjacent div.circle-clipper while the
   227   * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
   228   */
   229  .gap-patch {
   230    position: absolute;
   231    top: 0;
   232    left: 45%;
   233    width: 10%;
   234    height: 100%;
   235    overflow: hidden;
   236    border-color: inherit;
   237  }
   238  
   239  .gap-patch .circle {
   240    width: 1000%;
   241    left: -450%;
   242  }
   243  
   244  .circle-clipper {
   245    display: inline-block;
   246    position: relative;
   247    width: 50%;
   248    height: 100%;
   249    overflow: hidden;
   250    border-color: inherit;
   251  
   252    .circle {
   253      width: 200%;
   254      height: 100%;
   255      border-width: 3px; /* STROKEWIDTH */
   256      border-style: solid;
   257      border-color: inherit;
   258      border-bottom-color: transparent !important;
   259      border-radius: 50%;
   260      -webkit-animation: none;
   261      animation: none;
   262      position: absolute;
   263      top: 0;
   264      right: 0;
   265      bottom: 0;
   266    }
   267  
   268    &.left .circle {
   269      left: 0;
   270      border-right-color: transparent !important;
   271      -webkit-transform: rotate(129deg);
   272      transform: rotate(129deg);
   273    }
   274    &.right .circle {
   275      left: -100%;
   276      border-left-color: transparent !important;
   277      -webkit-transform: rotate(-129deg);
   278      transform: rotate(-129deg);
   279    }
   280  }
   281  
   282  
   283  
   284  .active .circle-clipper.left .circle {
   285    /* duration: ARCTIME */
   286    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   287    animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   288  }
   289  
   290  .active .circle-clipper.right .circle {
   291    /* duration: ARCTIME */
   292    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   293    animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
   294  }
   295  
   296  @-webkit-keyframes left-spin {
   297    from { -webkit-transform: rotate(130deg); }
   298    50% { -webkit-transform: rotate(-5deg); }
   299    to { -webkit-transform: rotate(130deg); }
   300  }
   301  
   302  @keyframes left-spin {
   303    from { transform: rotate(130deg); }
   304    50% { transform: rotate(-5deg); }
   305    to { transform: rotate(130deg); }
   306  }
   307  
   308  @-webkit-keyframes right-spin {
   309    from { -webkit-transform: rotate(-130deg); }
   310    50% { -webkit-transform: rotate(5deg); }
   311    to { -webkit-transform: rotate(-130deg); }
   312  }
   313  
   314  @keyframes right-spin {
   315    from { transform: rotate(-130deg); }
   316    50% { transform: rotate(5deg); }
   317    to { transform: rotate(-130deg); }
   318  }
   319  
   320  #spinnerContainer.cooldown {
   321    /* duration: SHRINK_TIME */
   322    -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
   323    animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
   324  }
   325  
   326  @-webkit-keyframes fade-out {
   327    from { opacity: 1; }
   328    to { opacity: 0; }
   329  }
   330  
   331  @keyframes fade-out {
   332    from { opacity: 1; }
   333    to { opacity: 0; }
   334  }