48 lines
793 B
Vue
48 lines
793 B
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="md-activity-indicator-spinning"
|
||
|
|
:class="{dark: color === 'dark'}"
|
||
|
|
>
|
||
|
|
<md-icon
|
||
|
|
class="md-activity-indicator-svg"
|
||
|
|
name="spinner"
|
||
|
|
:style="{width: `${size}px`, height: `${size}px`}"
|
||
|
|
></md-icon>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
import Icon from '../icon'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'md-activity-indicator-spinning',
|
||
|
|
|
||
|
|
components: {
|
||
|
|
[Icon.name]: Icon,
|
||
|
|
},
|
||
|
|
|
||
|
|
props: {
|
||
|
|
size: {
|
||
|
|
type: Number,
|
||
|
|
default: 70,
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: 'dark',
|
||
|
|
validator(val) {
|
||
|
|
return val === 'dark' || val === 'light'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus">
|
||
|
|
.md-activity-indicator-spinning
|
||
|
|
clearfix()
|
||
|
|
.md-icon
|
||
|
|
float left
|
||
|
|
&.dark
|
||
|
|
.md-icon
|
||
|
|
filter invert(1)
|
||
|
|
</style>
|