From 90a5a85eb1f1b67a7abfe2d079cc78767c9c6c5a Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 1 Jul 2020 22:15:41 -0700
Subject: [PATCH] Panel Loading: spin clockwise, not counter clockwise (#25998)

* spin clockwise

* spin clockwise
---
 .../dashboard/dashgrid/PanelHeader/PanelHeader.tsx     |  2 +-
 public/sass/mixins/_animations.scss                    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

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;
 }