gitea/web_src/css/modules/animations.css

@keyframes isloadingspin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.is-loading {
  pointer-events: none !important;
  position: relative !important;
}

.is-loading > * {
  opacity: 0.3;
}

.btn.is-loading > *,
.button.is-loading > * {
  opacity: 0;
}

.is-loading::after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  height: min(4em, 66.6%);
  width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: isloadingspin 1000ms infinite linear;
  border-width: 4px;
  border-style: solid;
  border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
  border-radius: var(--border-radius-full);
}

.is-loading.loading-icon-2px::after {
  border-width: 2px;
}

.is-loading.loading-icon-3px::after {
  border-width: 3px;
}

/* 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. */
form.single-button-form.is-loading > * {
  opacity: 1;
}

form.single-button-form.is-loading .button {
  color: transparent;
}

.markup pre.is-loading,
.editor-loading.is-loading {
  height: var(--height-loading);
}

.markup .is-loading > * {
  visibility: hidden;
}

.markup .is-loading {
  color: transparent;
  background: transparent;
}

/* TODO: not needed, use "is-loading loading-icon-2px" instead */
code.language-math.is-loading::after {
  padding: 0;
  border-width: 2px;
  width: 1.25rem;
  height: 1.25rem;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
@keyframes pulse-1p5 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

/* pulse animation for scale(1.5) in 200ms */
.pulse-1p5-200 {
  animation: pulse-1p5 200ms linear;
}

.ui.modal,
.ui.dimmer.transition {
  animation-name: fadein;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
}

/* FIXME: `octicon-sync` is counterclockwise, so this animation is also counterclockwise, it looks somewhat strange.
Ideally in the future we should use a better image for clockwise animation. */
.circular-spin {
  animation: circular-spin-keyframes 1s linear infinite;
}

@keyframes circular-spin-keyframes {
  100% {
    transform: rotate(-360deg);
  }
}