67 lines
957 B
Vue
67 lines
957 B
Vue
|
<template>
|
|||
|
|
<view class="mix-icon-loading">
|
|||
|
|
<view
|
|||
|
|
class="loading-icon"
|
|||
|
|
:style="{
|
|||
|
|
width: size,
|
|||
|
|
height: size,
|
|||
|
|
borderRightColor: color
|
|||
|
|
}"
|
|||
|
|
></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* 菊花loading小图标
|
|||
|
|
* @prop size 尺寸，单位rpx
|
|||
|
|
* @prop color 颜色
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
name: 'MixIconLoading',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
size: {
|
|||
|
|
type: String,
|
|||
|
|
default: '26rpx'
|
|||
|
|
},
|
|||
|
|
color: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#999'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang='scss'>
|
|||
|
|
.mix-icon-loading{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: auto;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
.loading-icon{
|
|||
|
|
width: 28rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
border: 4rpx solid #ddd;
|
|||
|
|
animation: mix-loading 1.8s steps(12) infinite;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
}
|
|||
|
|
@keyframes mix-loading{
|
|||
|
|
from {
|
|||
|
|
transform:rotate(0deg)
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
transform: rotate(1turn)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|