opdavies/rebuilding-acquia
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add animation to rotate 'in progress' icon

Browse source 
Fixes #2
This commit is contained in:
Oliver Davies 2019-03-15 17:38:57 +00:00
parent 10b98a0bda
commit 19d1582ae4
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/Environment/TaskLog/TaskLogItem.vue
View file

@ -2,7 +2,7 @@
<div>
<div class="px-3 py-4 border-b border-grey-3 flex" :class="{'bg-yellow-lightest': open}">
<div class="flex-none mr-3">
<svg v-if="task.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
<svg v-if="task.loading" class="h-5 w-5 text-grey-5 fill-current rotates" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
<svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
<svg v-if="!task.loading && !task.success" class="h-5 w-5 text-red fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
</div>
@ -78,3 +78,18 @@ export default {
}
}
</script>
<style scoped>
.rotates {
animation: rotation 1s infinite linear
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(-359deg)
}
}
</style>