code.gitea.io/gitea@v1.21.7/web_src/css/modules/animations.css (about)

     1  @keyframes isloadingspin {
     2    0% { transform: translate(-50%, -50%) rotate(0deg); }
     3    100% { transform: translate(-50%, -50%) rotate(360deg); }
     4  }
     5  
     6  .is-loading {
     7    pointer-events: none !important;
     8    position: relative !important;
     9    overflow: hidden !important;
    10  }
    11  
    12  .is-loading > * {
    13    opacity: 0.3;
    14  }
    15  
    16  .is-loading::after {
    17    content: "";
    18    position: absolute;
    19    display: block;
    20    left: 50%;
    21    top: 50%;
    22    height: min(4em, 66.6%);
    23    aspect-ratio: 1;
    24    transform: translate(-50%, -50%);
    25    animation: isloadingspin 1000ms infinite linear;
    26    border-width: 4px;
    27    border-style: solid;
    28    border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
    29    border-radius: var(--border-radius-circle);
    30  }
    31  
    32  .is-loading.small-loading-icon::after {
    33    border-width: 2px;
    34  }
    35  
    36  /* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
    37  form.single-button-form.is-loading > * {
    38    opacity: 1;
    39  }
    40  
    41  form.single-button-form.is-loading .button {
    42    color: transparent;
    43  }
    44  
    45  .markup pre.is-loading,
    46  .editor-loading.is-loading,
    47  .pdf-content.is-loading {
    48    height: var(--height-loading);
    49  }
    50  
    51  .markup .is-loading > * {
    52    visibility: hidden;
    53  }
    54  
    55  .markup .is-loading {
    56    color: transparent;
    57    background: transparent;
    58  }
    59  
    60  /* TODO: not needed, use "is-loading small-loading-icon" instead */
    61  code.language-math.is-loading::after {
    62    padding: 0;
    63    border-width: 2px;
    64    width: 1.25rem;
    65    height: 1.25rem;
    66  }
    67  
    68  @keyframes fadein {
    69    0% {
    70      opacity: 0;
    71    }
    72    100% {
    73      opacity: 1;
    74    }
    75  }
    76  
    77  @keyframes fadeout {
    78    0% {
    79      opacity: 1;
    80    }
    81    100% {
    82      opacity: 0;
    83    }
    84  }
    85  
    86  @keyframes pulse {
    87    0% {
    88      transform: scale(1);
    89    }
    90    50% {
    91      transform: scale(1.8);
    92    }
    93    100% {
    94      transform: scale(1);
    95    }
    96  }
    97  
    98  .pulse {
    99    animation: pulse 2s linear;
   100  }
   101  
   102  .ui.modal,
   103  .ui.dimmer.transition {
   104    animation-name: fadein;
   105    animation-duration: 100ms;
   106    animation-timing-function: ease-in-out;
   107  }