KevinMidboe/seasoned
1
0
Fork 0
mirror of https://github.com/KevinMidboe/seasoned.git synced 2026-03-11 03:49:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created a loader component that is the loading spinner for the page

Browse Source
This commit is contained in:
Kevin
2019-06-03 23:03:09 +02:00
parent 27cff0b0ac
commit aada5fc2c5
1 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/ui/Loader.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="loader">
<i class="loader--icon">
<i class="loader--icon-spinner" />
</i>
</div>
</template>
<style lang="scss" scoped>
@import "./src/scss/variables";
.loader {
display: flex;
width: 100%;
height: 30vh;
justify-content: center;
align-items: center;
&--icon{
border: 2px solid rgba($c-dark, 0.9);
border-radius: 50%;
display: block;
height: 40px;
// left: 50%;
// margin: -1.5em;
position: absolute;
width: 40px;
&-spinner {
// border: 2px solid transparent;
display: block;
animation: load 1s linear infinite;
height: 35px;
width: 35px;
&:after {
border: 7px solid rgba($c-green, 0.9);
border-radius: 50%;
content: '';
left: 8px;
position: absolute;
top: 22px;
}
}
}
@keyframes load {
100% { transform: rotate(360deg); }
}
}
</style>