| 1 |
<template> |
| 2 |
<svg class="wpb-loader" viewBox="0 0 24 24" :style="`width: ${computedSize}; height: ${computedSize}; vertical-align: middle;`">> |
| 3 |
<path :fill="color" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" /> |
| 4 |
</svg> |
| 5 |
</template> |
| 6 |
<style> |
| 7 |
.wpb-loader { |
| 8 |
animation: spin 0.65s linear infinite; |
| 9 |
} |
| 10 |
@keyframes spin { |
| 11 |
from { |
| 12 |
transform: rotate(0deg) translateZ(0); |
| 13 |
} |
| 14 |
to { |
| 15 |
transform: rotate(360deg) translateZ(0); |
| 16 |
} |
| 17 |
} |
| 18 |
</style> |
| 19 |
<script> |
| 20 |
export default { |
| 21 |
props: { |
| 22 |
size: { |
| 23 |
type: [String, Number], |
| 24 |
default: '1em' |
| 25 |
}, |
| 26 |
color: { |
| 27 |
type: String, |
| 28 |
default: 'currentColor' |
| 29 |
} |
| 30 |
}, |
| 31 |
computed: { |
| 32 |
computedSize() { |
| 33 |
// jQuery.isNumeric |
| 34 |
if( ! isNaN( this.size - parseFloat( this.size ) ) ) { |
| 35 |
return this.size + 'px'; |
| 36 |
} |
| 37 |
|
| 38 |
return this.size; |
| 39 |
} |
| 40 |
} |
| 41 |
} |
| 42 |
</script> |
| 43 |
|
