yay sprites

content/ZoteroPane.xul

@@ -6,8 +6,9 @@
   <hbox id="zotero-item-toolbar">
     <hbox id="better-bibtex-progress" hidden="true" insertbefore="zotero-pq-buttons">
       <label id="better-bibtex-progress-label" flex="20" value=""/>
-      <progressmeter id="better-bibtex-progress-meter" flex="40" mode="determined" value="0"/>
+      <!-- progressmeter id="better-bibtex-progress-meter" flex="40" mode="determined" value="0"/ -->
       <!-- label id="better-bibtex-progress-meter" value=""/ -->
+      <hbox id="better-bibtex-progress-meter" class="bbt-progress-sprite" width="20" height="20"></hbox>
     </hbox>
   </hbox>
 

content/better-bibtex.ts

@@ -729,8 +729,10 @@ function setProgress(progress: number | false, msg: string) {
   progressbox.hidden = progress === false ? true : false
   if (progress === false) return
 
+  /*
   const progressmeter: XUL.ProgressMeter = (document.getElementById('better-bibtex-progress-meter') as unknown as XUL.ProgressMeter)
   if (typeof progress === 'number') progressmeter.value = progress
+  */
 
   /*
   const clocks = [
@@ -743,6 +745,9 @@ function setProgress(progress: number | false, msg: string) {
   if (typeof progress === 'number') progressmeter.value = clocks[Math.ceil((progress / 100) * clocks.length)] // eslint-disable-line no-magic-numbers
   */
 
+  const progressmeter: XUL.Element = (document.getElementById('better-bibtex-progress-meter') as unknown as XUL.Element)
+  progressmeter.style.backgroundPosition = `-${Math.min(Math.abs(progress), 99) * 20}px 0` // eslint-disable-line no-magic-numbers
+
   const label: XUL.Label = (document.getElementById('better-bibtex-progress-label') as unknown as XUL.Label)
   label.value = msg
 }

skin/overlay.css

@@ -0,0 +1,14 @@
+.bbt-progress-sprite {
+  /* element coordinates */
+  position: absolute;
+  left: 0;
+  top:  0;
+
+  width: 20px;
+  height: 20px;
+
+  background-image: url(chrome://zotero-better-bibtex/skin/progress.png);
+
+  /* background coordinates */
+  background-position: 0 0;
+}

typings/xul.d.ts

@@ -7,6 +7,10 @@ export namespace XUL {
     public classList: ClassList
   }
   
+  class Image extends Element {
+    public src: string
+  }
+  
   class Label extends Element {
     public value: string
   }