RunningIcon 运行中

本组件显示一个有间隔的圆，并持续转动，类似loading效果，常用于：设备运行中，使用中等场景。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
show	Boolean	false	是否显示	All
size	Number,String	200rpx	icon尺寸	All
innerSize	Number,String	192rpx	icon内圆尺寸 size减去innerSize值为icon的边框宽度	All
gap	Number,String	16rpx	图标中间的间隔	All
color	String	#fff	颜色 支持c-bdr-开头的类	All
opacity	Number,String	1	透明度 值0~1	All
speed	String,Number	200	动画速度 单位ms	All
under	Boolean	false	插槽内容是否在icon的下方	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

插槽

插槽名	说明
default	内容插槽

示例

<template>
    <c-running-icon :show="show" size="114" innerSize="110" color="c-bdr-primary">
        <c-box height="100" width="100" radius="round" c-class="c-f-center" bg-color="c-bg-primary">
            <c-icon name="blue" size="60" color="#fff" />
        </c-box>
    </c-running-icon>
    <c-btn :text="show?'隐藏':'显示'" @click="show=!show" c-class="c-mt-20" />
</template>
<script setup>
import { ref } from 'vue'

const show = ref(false);
</script>