animations: Swapped CSS-based spinners for SVG-based ones

This is based on the work of Utkarsh Verma (n3r4zzurr0 on GitHub), under
the MIT license.

Author: yukijoou

docs/content/index.en-us.md

@@ -283,10 +283,11 @@ You can try it out using [the online demo](https://try.gitea.io/).
 
 - Web server framework: [Chi](http://github.com/go-chi/chi)
 - ORM: [XORM](https://xorm.io)
-- UI frameworks:
+- UI:
   - [jQuery](https://jquery.com)
   - [Fomantic UI](https://fomantic-ui.com)
   - [Vue3](https://vuejs.org)
+  - [svg-spinners by Utkarsh Verma](https://github.com/n3r4zzurr0/svg-spinners)
   - and various components (see package.json)
 - Editors:
   - [CodeMirror](https://codemirror.net)

web_src/css/base.css

@@ -13,6 +13,10 @@
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
   --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
+  --spinner-bar: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3" opacity="1"/><circle cx="12" cy="12" r="3" opacity="1"/><circle cx="20" cy="12" r="3" opacity="1" id="circle3"/></svg>');
+  --spinner-bar-animated: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3" opacity="1"><animate id="spinner_qYjJ" begin="0;spinner_t4KZ.end-0.25s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle><circle cx="12" cy="12" r="3" opacity=".4"><animate begin="spinner_qYjJ.begin+0.15s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle><circle cx="20" cy="12" r="3" opacity=".3"><animate id="spinner_t4KZ" begin="spinner_qYjJ.begin+0.3s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle></svg>');
+  --spinner-ring: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M 10.14,1.16 C 5.5567308,1.9332423 1.9541327,5.5038173 1.14,10.08 0.93830154,10.982014 1.5455751,11.865321 2.46,12 3.2691211,12.07754 3.9960611,11.504803 4.11,10.7 4.6691025,7.289357 7.3552406,4.6233851 10.77,4.09 11.785222,2.4815355 10.7774,4.0836 11.788589,2.4769418 10.142774,1.1587614 11.790739,2.4756981 10.14,1.16 Z"/></svg>');
+  --spinner-ring-animated: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>')
   /* non-color variables */
   --border-radius: 0.28571429rem;
   --opacity-disabled: 0.55;

web_src/css/modules/animations.css

@@ -1,8 +1,3 @@
-@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;
@@ -22,20 +17,28 @@
   height: min(4em, 66.6%);
   aspect-ratio: 1;
   transform: translate(-50%, -50%);
-  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%;
+  mask-size: cover;
+  -webkit-mask-size: cover;
+  mask-image: var(--spinner-ring);
+  -webkit-mask-image: var(--spinner-ring);
+  background: currentcolor;
+}
+
+.is-loading.small-loading-icon::after {
+  mask-image: var(--spinner-bar);
+  -webkit-mask-image: var(--spinner-bar);
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .is-loading::after {
-    animation: isloadingspin 500ms infinite linear;
+      mask-image: var(--spinner-ring-animated);
+      -webkit-mask-image: var(--spinner-ring-animated);
   }
-}
 
-.is-loading.small-loading-icon::after {
-  border-width: 2px;
+  .is-loading.small-loading-icon::after {
+    mask-image: var(--spinner-bar-animated);
+    -webkit-mask-image: var(--spinner-bar-animated);
+  }
 }
 
 /* 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. */