|
|
@@ -6,7 +6,9 @@
|
|
|
@keydown='event("keydown")'
|
|
|
>
|
|
|
<div class='loading_button__icon'>
|
|
|
- <span class='fa fa-refresh fa-spin'></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
</div>
|
|
|
<div class='loading_button__slot'>
|
|
|
<slot></slot>
|
|
|
@@ -31,6 +33,20 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss'>
|
|
|
+ @import '../assets/scss/variables.scss';
|
|
|
+
|
|
|
+ @keyframes loading {
|
|
|
+ 0% {
|
|
|
+ transform: scale(0.75);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.25);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(0.75);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.loading_button {
|
|
|
position: relative;
|
|
|
|
|
|
@@ -39,7 +55,28 @@
|
|
|
position: absolute;
|
|
|
width: calc(100% - 1rem);
|
|
|
opacity: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: calc(100% - 0.85rem);
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
pointer-events: none;
|
|
|
+
|
|
|
+ span {
|
|
|
+ height: 0.5rem;
|
|
|
+ width: 0.5rem;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 100%;
|
|
|
+ background-color: rgba(256,256,256,0.9);
|
|
|
+ animation-name: loading;
|
|
|
+ animation-duration: 1s;
|
|
|
+ animation-timing-function: linear;
|
|
|
+ animation-iteration-count: infinite;
|
|
|
+ margin: 0 0.25rem;
|
|
|
+
|
|
|
+ &:nth-child(2n) { animation-delay: 0.333s; }
|
|
|
+ &:nth-child(3n) { animation-delay: 0.666s; }
|
|
|
+ }
|
|
|
}
|
|
|
@at-root #{&}__slot {
|
|
|
transition: all 0.2s;
|
|
|
@@ -48,7 +85,6 @@
|
|
|
}
|
|
|
|
|
|
.loading_button--loading {
|
|
|
- filter: grayscale(0.5);
|
|
|
cursor: not-allowed;
|
|
|
|
|
|
.loading_button__icon {
|
sbkwgh