diff --git a/chrome/content/zotero/integration/insertNoteDialog.xhtml b/chrome/content/zotero/integration/insertNoteDialog.xhtml
index e4c8646e4e..58c3285963 100644
--- a/chrome/content/zotero/integration/insertNoteDialog.xhtml
+++ b/chrome/content/zotero/integration/insertNoteDialog.xhtml
@@ -60,9 +60,7 @@
type="content"
remote="false"
maychangeremoteness="false"/>
-
-
-
+
diff --git a/chrome/content/zotero/integration/quickFormat.js b/chrome/content/zotero/integration/quickFormat.js
index 0c314f71fd..341a9682de 100644
--- a/chrome/content/zotero/integration/quickFormat.js
+++ b/chrome/content/zotero/integration/quickFormat.js
@@ -1353,7 +1353,7 @@ var Zotero_QuickFormat = new function () {
function _resetSearchTimer() {
// Show spinner
var spinner = document.querySelector('.citation-dialog.spinner');
- spinner.style.visibility = '';
+ spinner.setAttribute("status", "animate");
// Cancel current search if active
if (_searchPromise && _searchPromise.isPending()) {
_searchPromise.cancel();
@@ -1364,7 +1364,7 @@ var Zotero_QuickFormat = new function () {
.then(() => {
inputIsPristine = false;
_searchPromise = null;
- spinner.style.visibility = 'hidden';
+ spinner.removeAttribute("status");
});
}
diff --git a/chrome/content/zotero/integration/quickFormat.xhtml b/chrome/content/zotero/integration/quickFormat.xhtml
index 88fa3695f2..0f4a75635e 100644
--- a/chrome/content/zotero/integration/quickFormat.xhtml
+++ b/chrome/content/zotero/integration/quickFormat.xhtml
@@ -75,9 +75,7 @@
remote="false"
maychangeremoteness="false"/>
-
-
-
+
diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index 7631035053..5ed8a4daba 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -2777,9 +2777,9 @@ var ZoteroPane = new function()
return;
}
var spinner = document.getElementById('zotero-tb-search-spinner');
- spinner.style.display = 'inline';
+ spinner.setAttribute("status", "animate");
yield this.itemsView.setFilter('search', searchVal);
- spinner.style.display = 'none';
+ spinner.removeAttribute("status");
if (runAdvanced) {
this.clearItemsPaneMessage();
}
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 7774db6c3e..903bb36c6a 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -1054,7 +1054,7 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/chrome/skin/default/zotero/16/light/loading.svg b/chrome/skin/default/zotero/16/light/loading.svg
new file mode 100644
index 0000000000..fc8cf3ced6
--- /dev/null
+++ b/chrome/skin/default/zotero/16/light/loading.svg
@@ -0,0 +1,21 @@
+
diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css
index 084e8fab92..c9b177d56c 100644
--- a/chrome/skin/default/zotero/zotero.css
+++ b/chrome/skin/default/zotero/zotero.css
@@ -209,19 +209,6 @@ zoterosearch .menulist-icon {
align-items: center;
}
-.zotero-spinner-14 {
- list-style-image: url(chrome://zotero/skin/spinner-14px.png);
- height: 14px;
- width: 14px;
- margin-right: 2px;
-}
-
-.zotero-spinner-16 {
- list-style-image: url(chrome://zotero/skin/spinner-16px.png);
- height: 16px;
- width: 16px;
-}
-
#zotero-edit-bibliography-dialog #item-list .listcell-icon {
max-width: 16px;
}
@@ -236,6 +223,4 @@ zoterosearch .menulist-icon {
@media (min-resolution: 1.25dppx) {
.zotero-scrape-popup-library { list-style-image: url('chrome://zotero/skin/treesource-library@2x.png'); }
.zotero-scrape-popup-collection { list-style-image: url('chrome://zotero/skin/treesource-collection@2x.png'); }
- .zotero-spinner-14 { list-style-image: url(chrome://zotero/skin/spinner-14px@2x.png); }
- .zotero-spinner-16 { list-style-image: url(chrome://zotero/skin/spinner-16px@2x.png); }
}
diff --git a/scss/_zotero.scss b/scss/_zotero.scss
index 8ad162a69d..1f04d8d846 100644
--- a/scss/_zotero.scss
+++ b/scss/_zotero.scss
@@ -40,6 +40,7 @@
@import "components/publications-dialog";
@import "components/rtfScan.scss";
@import "components/search";
+@import "components/spinner";
@import "components/syncButtonTooltip";
@import "components/tabBar";
@import "components/tagSelector";
diff --git a/scss/components/_spinner.scss b/scss/components/_spinner.scss
new file mode 100644
index 0000000000..75ed793abf
--- /dev/null
+++ b/scss/components/_spinner.scss
@@ -0,0 +1,25 @@
+@keyframes rotating {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.zotero-spinner-16 {
+ width: 16px;
+ height: 16px;
+ fill: var(--fill-secondary);
+ @include focus-states using ($color) {
+ @include svgicon("loading", $color, "16");
+ }
+ -moz-context-properties: fill, fill-opacity;
+ animation: none;
+ display: none;
+
+ &[status=animate] {
+ display: inline;
+ animation: rotating 0.5s steps(12) infinite;
+ }
+}
\ No newline at end of file
diff --git a/scss/elements/_quickSearchTextbox.scss b/scss/elements/_quickSearchTextbox.scss
index 8b3a5fd36a..3d957b2efa 100644
--- a/scss/elements/_quickSearchTextbox.scss
+++ b/scss/elements/_quickSearchTextbox.scss
@@ -62,3 +62,7 @@ quick-search-textbox {
height: 28px;
z-index: 1;
}
+
+#zotero-tb-search-spinner {
+ margin: 0 8px;
+}
\ No newline at end of file