diff --git a/core/misc/ajax.js b/core/misc/ajax.js
index 507a40b..63a0dc0 100644
--- a/core/misc/ajax.js
+++ b/core/misc/ajax.js
@@ -817,7 +817,7 @@
* Sets the throbber progress indicator.
*/
Drupal.Ajax.prototype.setProgressIndicatorThrobber = function () {
- this.progress.element = $('
');
+ this.progress.element = $('');
if (this.progress.message) {
this.progress.element.find('.throbber').after('' + this.progress.message + '
');
}
diff --git a/core/misc/throbber-active.svg b/core/misc/throbber-active.svg
new file mode 100644
index 0000000..e233ee5
--- /dev/null
+++ b/core/misc/throbber-active.svg
@@ -0,0 +1,3 @@
+
diff --git a/core/misc/throbber-inactive.svg b/core/misc/throbber-inactive.svg
new file mode 100644
index 0000000..ca0bef2
--- /dev/null
+++ b/core/misc/throbber-inactive.svg
@@ -0,0 +1,3 @@
+
diff --git a/core/modules/system/css/components/ajax-progress.module.css b/core/modules/system/css/components/ajax-progress.module.css
index 136c2e1..99c81d8 100644
--- a/core/modules/system/css/components/ajax-progress.module.css
+++ b/core/modules/system/css/components/ajax-progress.module.css
@@ -11,9 +11,16 @@
float: right;
}
.ajax-progress-throbber .throbber {
- background: transparent url(../../../../misc/throbber-active.gif) no-repeat 0px center;
- display: inline;
- padding: 1px 5px 2px;
+ background: transparent url(../../../../misc/throbber-active.svg) no-repeat 50% 50%;
+ display: inline-block;
+ padding: 0;
+ width: 18px;
+ height: 18px;
+}
+.throbber.is-throbbing {
+ -webkit-animation: rotate-throbber 1s linear infinite;
+ -moz-animation: rotate-throbber 1s linear infinite;
+ animation: rotate-throbber 1s linear infinite;
}
.ajax-progress-throbber .message {
display: inline;
@@ -47,3 +54,19 @@ tr .ajax-progress-throbber .throbber {
left: auto;
right: 49%;
}
+
+/**
+ * AJAX Progress throbber animations.
+ */
+@-moz-keyframes rotate-throbber {
+ to {-moz-transform: rotate(-360deg);}
+}
+@-webkit-keyframes rotate-throbber {
+ to {-webkit-transform: rotate(-360deg);}
+}
+@-ms-keyframes rotate-throbber {
+ to {-ms-transform: rotate(-360deg);}
+}
+@keyframes rotate-throbber {
+ to {transform: rotate(-360deg);}
+}
diff --git a/core/modules/system/css/components/autocomplete-loading.module.css b/core/modules/system/css/components/autocomplete-loading.module.css
index 40d3323..cb833c6 100644
--- a/core/modules/system/css/components/autocomplete-loading.module.css
+++ b/core/modules/system/css/components/autocomplete-loading.module.css
@@ -6,7 +6,7 @@
*/
.js input.form-autocomplete {
- background-image: url(../../../../misc/throbber-inactive.png);
+ background-image: url(../../../../misc/throbber-inactive.svg);
background-position: 100% center; /* LTR */
background-repeat: no-repeat;
}
@@ -14,7 +14,7 @@
background-position: 0% center;
}
.js input.form-autocomplete.ui-autocomplete-loading {
- background-image: url(../../../../misc/throbber-active.gif);
+ background-image: url(../../../../misc/throbber-active.svg);
background-position: 100% center; /* LTR */
}
.js[dir="rtl"] input.form-autocomplete.ui-autocomplete-loading {
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 4ab55c4..9e245e6 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -766,14 +766,36 @@ td.group-title {
}
.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
position: absolute;
- right: -5px; /* LTR */
- top: -1px;
+ right: 0; /* LTR */
+ top: 0;
z-index: 2;
+ height: 100%;
+ width: 20px;
}
[dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
- left: -5px;
+ left: 0;
right: auto;
}
+.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber:before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 0 50% 50% 0;
+ background-color: #fff;
+ background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+ background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+}
+.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber .throbber {
+ position: absolute;
+ top: 3px;
+ width: 100%;
+ left: 0;
+ margin: 0;
+}
.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
border-radius: 1.1em 0 0 0; /* LTR */
}
diff --git a/core/themes/bartik/css/components/dropbutton.component.css b/core/themes/bartik/css/components/dropbutton.component.css
index b5113f5..9477d6c 100644
--- a/core/themes/bartik/css/components/dropbutton.component.css
+++ b/core/themes/bartik/css/components/dropbutton.component.css
@@ -34,6 +34,7 @@
.js .dropbutton .secondary-action {
border-top-color: #ccc;
}
+.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber:before,
.js .dropbutton-toggle button {
background-color: #e8e8e8;
background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2);
diff --git a/core/themes/seven/css/components/dropbutton.component.css b/core/themes/seven/css/components/dropbutton.component.css
index 229f1bd..1124515 100644
--- a/core/themes/seven/css/components/dropbutton.component.css
+++ b/core/themes/seven/css/components/dropbutton.component.css
@@ -156,7 +156,11 @@
.dropbutton .secondary-action {
border-top: 1px solid #bfbfba;
}
-
+.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber:before {
+ background-color: #f2f1eb;
+ background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+ background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
+}
/**
* Rare instances when a dropbutton is actually just a button.
* Copied from Seven's buttons.css.
--
1.8.4.2