Lev
2 years ago
5 changed files with 593 additions and 34 deletions
@ -0,0 +1,539 @@ |
|||||||
|
<template> |
||||||
|
<div v-bind:style="styles" class="spinner spinner--socker"> |
||||||
|
<div v-bind:style="innerStyles" class="spinner-inner"> |
||||||
|
<div class="gel center-gel"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c1 r1"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c2 r1"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c3 r1"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c4 r1"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c5 r1"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c6 r1"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gel c7 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gel c8 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c9 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c10 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c11 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c12 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c13 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c14 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c15 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c16 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c17 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c18 r2"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c19 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c20 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c21 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c22 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c23 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c24 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c25 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c26 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c28 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c29 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c30 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c31 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c32 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c33 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c34 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c35 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c36 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
<div class="gel c37 r3"> |
||||||
|
<div class="hex-brick h1"></div> |
||||||
|
<div class="hex-brick h2"></div> |
||||||
|
<div class="hex-brick h3"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
size: { |
||||||
|
default: '100px' |
||||||
|
}, |
||||||
|
color: { |
||||||
|
default: '#ec6068' // '#834c6e' |
||||||
|
}, |
||||||
|
secondaryColor: { |
||||||
|
default: '#7074f4' // '#286b4b' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
innerStyles() { |
||||||
|
let size = parseInt(this.size) |
||||||
|
return { |
||||||
|
transform: 'scale(' + (size / 220) + ')', |
||||||
|
'--bg-color': this.color, |
||||||
|
'--secondary-color': this.secondaryColor |
||||||
|
} |
||||||
|
}, |
||||||
|
styles() { |
||||||
|
return { |
||||||
|
width: this.size, |
||||||
|
height: this.size |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.spinner { |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
* { |
||||||
|
line-height: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.spinner-inner { |
||||||
|
transform-origin: center center; |
||||||
|
width: 200px; |
||||||
|
height: 200px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.hex-brick { |
||||||
|
background: var(--bg-color); |
||||||
|
width: 30px; |
||||||
|
height: 17px; |
||||||
|
position: absolute; |
||||||
|
top: 5px; |
||||||
|
animation-name: socket-fade; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
} |
||||||
|
|
||||||
|
.h2 { |
||||||
|
transform: rotate(60deg); |
||||||
|
} |
||||||
|
|
||||||
|
.h3 { |
||||||
|
transform: rotate(-60deg); |
||||||
|
} |
||||||
|
|
||||||
|
.gel { |
||||||
|
height: 30px; |
||||||
|
width: 30px; |
||||||
|
transition: all .3s; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.center-gel { |
||||||
|
margin-left: -15px; |
||||||
|
margin-top: -15px; |
||||||
|
|
||||||
|
animation-name: socket-pulse; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
} |
||||||
|
|
||||||
|
.c1 { |
||||||
|
margin-left: -47px; |
||||||
|
margin-top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.c2 { |
||||||
|
margin-left: -31px; |
||||||
|
margin-top: -43px; |
||||||
|
} |
||||||
|
|
||||||
|
.c3 { |
||||||
|
margin-left: 1px; |
||||||
|
margin-top: -43px; |
||||||
|
} |
||||||
|
|
||||||
|
.c4 { |
||||||
|
margin-left: 17px; |
||||||
|
margin-top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.c5 { |
||||||
|
margin-left: -31px; |
||||||
|
margin-top: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.c6 { |
||||||
|
margin-left: 1px; |
||||||
|
margin-top: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.c7 { |
||||||
|
margin-left: -63px; |
||||||
|
margin-top: -43px; |
||||||
|
} |
||||||
|
|
||||||
|
.c8 { |
||||||
|
margin-left: 33px; |
||||||
|
margin-top: -43px; |
||||||
|
} |
||||||
|
|
||||||
|
.c9 { |
||||||
|
margin-left: -15px; |
||||||
|
margin-top: 41px; |
||||||
|
} |
||||||
|
|
||||||
|
.c10 { |
||||||
|
margin-left: -63px; |
||||||
|
margin-top: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.c11 { |
||||||
|
margin-left: 33px; |
||||||
|
margin-top: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.c12 { |
||||||
|
margin-left: -15px; |
||||||
|
margin-top: -71px; |
||||||
|
} |
||||||
|
|
||||||
|
.c13 { |
||||||
|
margin-left: -47px; |
||||||
|
margin-top: -71px; |
||||||
|
} |
||||||
|
|
||||||
|
.c14 { |
||||||
|
margin-left: 17px; |
||||||
|
margin-top: -71px; |
||||||
|
} |
||||||
|
|
||||||
|
.c15 { |
||||||
|
margin-left: -47px; |
||||||
|
margin-top: 41px; |
||||||
|
} |
||||||
|
|
||||||
|
.c16 { |
||||||
|
margin-left: 17px; |
||||||
|
margin-top: 41px; |
||||||
|
} |
||||||
|
|
||||||
|
.c17 { |
||||||
|
margin-left: -79px; |
||||||
|
margin-top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.c18 { |
||||||
|
margin-left: 49px; |
||||||
|
margin-top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.c19 { |
||||||
|
margin-left: -63px; |
||||||
|
margin-top: -99px; |
||||||
|
} |
||||||
|
|
||||||
|
.c20 { |
||||||
|
margin-left: 33px; |
||||||
|
margin-top: -99px; |
||||||
|
} |
||||||
|
|
||||||
|
.c21 { |
||||||
|
margin-left: 1px; |
||||||
|
margin-top: -99px; |
||||||
|
} |
||||||
|
|
||||||
|
.c22 { |
||||||
|
margin-left: -31px; |
||||||
|
margin-top: -99px; |
||||||
|
} |
||||||
|
|
||||||
|
.c23 { |
||||||
|
margin-left: -63px; |
||||||
|
margin-top: 69px; |
||||||
|
} |
||||||
|
|
||||||
|
.c24 { |
||||||
|
margin-left: 33px; |
||||||
|
margin-top: 69px; |
||||||
|
} |
||||||
|
|
||||||
|
.c25 { |
||||||
|
margin-left: 1px; |
||||||
|
margin-top: 69px; |
||||||
|
} |
||||||
|
|
||||||
|
.c26 { |
||||||
|
margin-left: -31px; |
||||||
|
margin-top: 69px; |
||||||
|
} |
||||||
|
|
||||||
|
.c27 { |
||||||
|
margin-left: -79px; |
||||||
|
margin-top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.c28 { |
||||||
|
margin-left: -95px; |
||||||
|
margin-top: -43px; |
||||||
|
} |
||||||
|
|
||||||
|
.c29 { |
||||||
|
margin-left: -95px; |
||||||
|
margin-top: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.c30 { |
||||||
|
margin-left: 49px; |
||||||
|
margin-top: 41px; |
||||||
|
} |
||||||
|
|
||||||
|
.c31 { |
||||||
|
margin-left: -79px; |
||||||
|
margin-top: -71px; |
||||||
|
} |
||||||
|
|
||||||
|
.c32 { |
||||||
|
margin-left: -111px; |
||||||
|
margin-top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.c33 { |
||||||
|
margin-left: 65px; |
||||||
|
margin-top: -43px; |
||||||
|
} |
||||||
|
|
||||||
|
.c34 { |
||||||
|
margin-left: 65px; |
||||||
|
margin-top: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.c35 { |
||||||
|
margin-left: -79px; |
||||||
|
margin-top: 41px; |
||||||
|
} |
||||||
|
|
||||||
|
.c36 { |
||||||
|
margin-left: 49px; |
||||||
|
margin-top: -71px; |
||||||
|
} |
||||||
|
|
||||||
|
.c37 { |
||||||
|
margin-left: 81px; |
||||||
|
margin-top: -15px; |
||||||
|
} |
||||||
|
|
||||||
|
.r1 { |
||||||
|
animation-name: socket-pulse; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
animation-delay: .2s; |
||||||
|
} |
||||||
|
|
||||||
|
.r2 { |
||||||
|
animation-name: socket-pulse; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
animation-delay: .4s; |
||||||
|
} |
||||||
|
|
||||||
|
.r3 { |
||||||
|
animation-name: socket-pulse; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
animation-delay: .6s; |
||||||
|
} |
||||||
|
|
||||||
|
.r1 > .hex-brick { |
||||||
|
animation-name: socket-fade; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
animation-delay: .2s; |
||||||
|
} |
||||||
|
|
||||||
|
.r2 > .hex-brick { |
||||||
|
animation-name: socket-fade; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
animation-delay: .4s; |
||||||
|
} |
||||||
|
|
||||||
|
.r3 > .hex-brick { |
||||||
|
animation-name: socket-fade; |
||||||
|
animation-duration: 2s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
animation-delay: .6s; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@keyframes socket-pulse { |
||||||
|
0% { |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
|
||||||
|
50% { |
||||||
|
transform: scale(0.01); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes socket-fade { |
||||||
|
0% { |
||||||
|
background: var(--bg-color); |
||||||
|
} |
||||||
|
|
||||||
|
50% { |
||||||
|
background: var(--secondary-color); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
background: var(--bg-color); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue