1 files changed, 81 insertions, 0 deletions
diff --git a/web_src/css/animations.css b/web_src/css/animations.css
new file mode 100644
index 0000000000..689898da2a
--- /dev/null
+++ b/web_src/css/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;
+}