Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

moon-loader

v1.0.3arrow_drop_down
v1.0.3
STATUS
Passing
DOWNLOADS
3
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
3 KB
1 contributor
Install moon-loader as a package?
Copied
npm i @bit/greyby.vue-spinner.moon-loader
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
MoonLoader.vue
117 Lines(106 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<template>
<div class="v-spinner" v-show="loading">
    <div class="v-moon v-moon1" v-bind:style="spinnerStyle">
    <div class="v-moon v-moon2" v-bind:style="[spinnerMoonStyle,animationStyle2]">
    </div><div class="v-moon v-moon3" v-bind:style="[spinnerStyle,animationStyle3]">
    </div></div>
  </div>
</template>

<script>
export default {
  
  name: 'MoonLoader',

  props: {
    loading: {
      type: Boolean,
      default: true
    },
    color: { 
      type: String,
      default: '#5dc596'
    },
    size: {
      type: String,
      default: '60px'
    },
    margin: {
      type: String,
      default: '2px'
    },
    radius: {
      type: String,
      default: '100%'
    }
  },
  data () {
    return {
      spinnerStyle: {
        height: this.size,
        width: this.size,
        borderRadius: this.radius
      }
    }
  },
  computed: {
    moonSize() {
      return parseFloat(this.size)/7
    },
    spinnerMoonStyle () {
      return {
        height: this.moonSize  + 'px',
        width: this.moonSize  + 'px',
        borderRadius: this.radius
      }
    },
    animationStyle2 () {
      return {
        top: parseFloat(this.size)/2 - this.moonSize/2 + 'px',
        backgroundColor: this.color
      }
    },
    animationStyle3 () {
      return {
        border: this.moonSize + 'px solid ' + this.color
      }
    }
  }

}
</script>

<style>

.v-spinner .v-moon1
{

    -webkit-animation: v-moonStretchDelay 0.6s 0s infinite linear;
            animation: v-moonStretchDelay 0.6s 0s infinite linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    position: relative;
}

.v-spinner .v-moon2
{
    -webkit-animation: v-moonStretchDelay 0.6s 0s infinite linear;
            animation: v-moonStretchDelay 0.6s 0s infinite linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0.8;
    position: absolute;
}

.v-spinner .v-moon3
{
    opacity: 0.1;
}

@-webkit-keyframes v-moonStretchDelay
{
    100%
    {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes v-moonStretchDelay
{
    100%
    {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
</style>