diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index ab009e4e7ca..ca92498b372 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -95,7 +95,7 @@ export class PanelHeader extends Component<Props, State> {
     return (
       <div className="panel-loading" onClick={this.onCancelQuery}>
         <Tooltip content="Cancel query">
-          <Icon className="panel-loading__spinner spin-counter-clock" name="sync" />
+          <Icon className="panel-loading__spinner spin-clockwise" name="sync" />
         </Tooltip>
       </div>
     );
diff --git a/public/sass/mixins/_animations.scss b/public/sass/mixins/_animations.scss
index 7104303400c..cf98ad30140 100644
--- a/public/sass/mixins/_animations.scss
+++ b/public/sass/mixins/_animations.scss
@@ -35,15 +35,15 @@
   }
 }
 
-@keyframes spin-counter-clock {
+@keyframes spin-clockwise {
   0% {
-    transform: rotate(359deg);
+    transform: rotate(0deg) scaleX(-1); // scaleX flips the `sync` icon so arrows point the correct way
   }
   100% {
-    transform: rotate(0deg);
+    transform: rotate(359deg) scaleX(-1);
   }
 }
 
-.spin-counter-clock {
-  animation: spin-counter-clock 3s infinite linear;
+.spin-clockwise {
+  animation: spin-clockwise 3s infinite linear;
 }