Load loading indicator from file instead of inlining (#6112)

* Load loading indicator from file instead of inlining

* Small tweaks

* Fix arcs SVG

panel/dist/css/loading.css

@@ -3,28 +3,64 @@
   overflow: hidden;
 }
 
+:host(.pn-loading) > *,
+.pn-loading > * {
+  filter: blur(1px) opacity(0.5);
+}
+
 :host(.pn-loading):before,
 .pn-loading:before {
-  position: absolute;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  content: '';
+  cursor: progress;
   height: 100%;
   width: 100%;
-  content: '';
+  position: absolute;
   z-index: 1000;
-  background-color: rgb(255, 255, 255, 0.5);
-  border-color: lightgray;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: auto 50%;
-  border-width: 1px;
+}
+
+:host(.pn-loading):after,
+.pn-loading:after {
+  content: '';
   cursor: progress;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 1000;
 }
 
 :host(.pn-loading) .pn-loading-msg,
 .pn-loading .pn-loading-msg {
+  color: black;
+  font-size: 2em;
   position: absolute;
   top: 72%;
-  font-size: 2em;
-  color: black;
-  width: 100%;
   text-align: center;
+  width: 100%;
+}
+
+:host(.pn-loading.pn-arc):before,
+.pn-loading.pn-arc:before {
+  -webkit-mask-image: url('../assets/arc_spinner.svg');
+}
+
+:host(.pn-loading.pn-arcs):before,
+.pn-loading.pn-arcs:before {
+  -webkit-mask-image: url('../assets/arcs_spinner.svg');
+}
+
+:host(.pn-loading.pn-petal):before,
+.pn-loading.pn-petal:before {
+  -webkit-mask-image: url('../assets/petal_spinner.svg');
+}
+
+:host(.pn-loading.pn-bar):before,
+.pn-loading.pn-bar:before {
+  -webkit-mask-image: url('../assets/bar_spinner.svg');
+}
+
+:host(.pn-loading.pn-dots):before,
+.pn-loading.pn-dots:before {
+  -webkit-mask-image: url('../assets/dots_spinner.svg');
 }

panel/io/convert.py

@@ -329,12 +329,11 @@ def script_to_html(
 
     # Collect resources
     resources = Resources(mode='inline' if inline else 'cdn')
-    loading_base = (DIST_DIR / "css" / "loading.css").read_text(encoding='utf-8')
     spinner_css = loading_css(
         config.loading_spinner, config.loading_color, config.loading_max_height
     )
     css_resources.append(
-        f'<style type="text/css">\n{loading_base}\n{spinner_css}\n</style>'
+        f'<style type="text/css">\n{spinner_css}\n</style>'
     )
     with set_curdoc(document):
         bokeh_js, bokeh_css = bundle_resources(document.roots, resources)