Panel Loading: spin clockwise, not counter clockwise (#25998)

* spin clockwise

* spin clockwise

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

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