Fix circular spin animation direction (#35785)

Wait for the status icon to rotate clockwise instead of counterclockwise

before:
![GIF 2025-10-30
10-50-07](https://github.com/user-attachments/assets/3771b0bf-44e4-45a0-bde5-1b2b3dd8ba2a)

after:
![GIF 2025-10-30
10-50-43](https://github.com/user-attachments/assets/c45307fe-39a4-4e60-b48e-9d922c407565)

---------

Signed-off-by: 鲁汀 <131967983+lutinglt@users.noreply.github.com>
Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/repo/actions/status.tmpl

@@ -16,7 +16,7 @@
 {{else if eq .status "blocked"}}
 	{{svg "octicon-blocked" $size (printf "text yellow %s" $className)}}
 {{else if eq .status "running"}}
-	{{svg "gitea-running" $size (printf "text yellow circular-spin %s" $className)}}
+	{{svg "gitea-running" $size (printf "text yellow rotate-clockwise %s" $className)}}
 {{else}}{{/*failure, unknown*/}}
 	{{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}}
 {{end}}

templates/repo/issue/view_content/pull_merge_box.tmpl

@@ -102,7 +102,7 @@
 				{{template "repo/issue/view_content/update_branch_by_merge" $}}
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item">
-					{{svg "octicon-sync" 16 "circular-spin"}}
+					{{svg "gitea-running" 16 "rotate-clockwise"}}
 					{{ctx.Locale.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}

web_src/css/modules/animations.css

@@ -116,14 +116,12 @@ code.language-math.is-loading::after {
   animation-timing-function: ease-in-out;
 }
 
-/* FIXME: `octicon-sync` is counterclockwise, so this animation is also counterclockwise, it looks somewhat strange.
-Ideally in the future we should use a better image for clockwise animation. */
-.circular-spin {
-  animation: circular-spin-keyframes 1s linear infinite;
+.rotate-clockwise {
+  animation: rotate-clockwise-keyframes 1s linear infinite;
 }
 
-@keyframes circular-spin-keyframes {
+@keyframes rotate-clockwise-keyframes {
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }

web_src/js/components/ActionRunStatus.vue

@@ -24,7 +24,7 @@ withDefaults(defineProps<{
     <SvgIcon name="octicon-stop" class="text grey" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
     <SvgIcon name="octicon-circle" class="text grey" :size="size" :class="className" v-else-if="status === 'waiting'"/>
     <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
-    <SvgIcon name="gitea-running" class="text yellow" :size="size" :class="'circular-spin ' + className" v-else-if="status === 'running'"/>
+    <SvgIcon name="gitea-running" class="text yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
     <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
   </span>
 </template>

web_src/js/components/RepoActionView.vue

@@ -608,7 +608,7 @@ export default defineComponent({
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
-              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 circular-spin"/>
+              <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
               <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
 

web_src/js/components/RepoCodeFrequency.vue

@@ -150,7 +150,7 @@ const options: ChartOptions<'line'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">

web_src/js/components/RepoContributors.vue

@@ -381,7 +381,7 @@ export default defineComponent({
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">

web_src/js/components/RepoRecentCommits.vue

@@ -128,7 +128,7 @@ const options: ChartOptions<'bar'> = {
     <div class="tw-flex ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
         <div v-if="isLoading">
-          <SvgIcon name="octicon-sync" class="tw-mr-2 circular-spin"/>
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
           {{ locale.loadingInfo }}
         </div>
         <div v-else class="text red">

web_src/js/components/ViewFileTreeItem.vue

@@ -62,7 +62,7 @@ const onItemClick = (e: MouseEvent) => {
     @click.stop="onItemClick"
   >
     <div v-if="item.entryMode === 'tree'" class="item-toggle">
-      <SvgIcon v-if="isLoading" name="octicon-sync" class="circular-spin"/>
+      <SvgIcon v-if="isLoading" name="gitea-running" class="rotate-clockwise"/>
       <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop.prevent="doLoadChildren"/>
     </div>
     <div class="item-content">