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 = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
+    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber is-throbbing">&nbsp;</div></div>');
     if (this.progress.message) {
       this.progress.element.find('.throbber').after('<div class="message">' + this.progress.message + '</div>');
     }
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path fill="#40B6ff" d="M17.94,5.05l-1.38,0.86L16.54,6c1.01,1.65,1.4,3.68,0.91,5.7c-0.89,3.7-4.35,6.05-8.02,5.75 c-0.67-0.06-0.47-0.53-0.47-0.53l0.3-1.24c0,0,0.05-0.49,0.62-0.46c2.47,0.11,4.76-1.54,5.37-4.05c0.34-1.42,0.06-2.84-0.64-4 L14.5,7.2l-1.66,1.04c-0.56,0.35-0.92,0.11-0.78-0.54l0.75-3.58c0.14-0.65,0.78-1.05,1.42-0.89l3.55,0.89 C18.44,4.27,18.51,4.69,17.94,5.05z M7.23,11.64l-1.64,1.03l-0.04,0.01c-0.7-1.16-0.98-2.58-0.64-4c0.61-2.5,2.9-4.15,5.37-4.05 c0.57,0.02,0.62-0.46,0.62-0.46l0.3-1.24c0,0,0.2-0.47-0.47-0.53C7.05,2.1,3.59,4.45,2.7,8.15c-0.49,2.02-0.1,4.05,0.91,5.7 l-0.02,0.07l-1.45,0.91c-0.56,0.35-0.5,0.78,0.15,0.94l3.55,0.89c0.65,0.16,1.29-0.24,1.42-0.89l0.75-3.59 C8.14,11.53,7.79,11.28,7.23,11.64z"/>
+</svg>
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path fill="#dedede" d="M10.07,2.38c-4.19,0-7.58,3.38-7.58,7.55c0,4.17,3.39,7.55,7.58,7.55c4.19,0,7.58-3.38,7.58-7.55 C17.65,5.76,14.26,2.38,10.07,2.38z M10.04,15.22c-2.94,0-5.32-2.37-5.32-5.29c0-2.92,2.38-5.29,5.32-5.29 c2.94,0,5.32,2.37,5.32,5.29C15.36,12.85,12.98,15.22,10.04,15.22z"/>
+</svg>
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