Reorganize CSS files (#24739)

Reorganize various CSS files for clarity, group together by subdirectory
in `index.css`. This reorders some of the rules, but I don't think it
should introduce any issues because of that.

web_src/css/modules/animations.css

@@ -0,0 +1,81 @@
+@keyframes isloadingspin {
+  0% { transform: translate(-50%, -50%) rotate(0deg); }
+  100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+.is-loading {
+  background: transparent !important;
+  color: transparent !important;
+  border: transparent !important;
+  pointer-events: none !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+.is-loading::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 4rem;
+  height: 4rem;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  animation: isloadingspin 500ms 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: 100%;
+}
+
+.markup pre.is-loading,
+.editor-loading.is-loading {
+  height: var(--height-loading);
+}
+
+.btn-octicon.is-loading::after {
+  border-width: 2px;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+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;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.pulse {
+  animation: pulse 2s linear;
+}