ActivityIndicator 活动指示器

活动指示器，一般用于正在进行中的任务示意 ^1.4.0+

引入

import { ActivityIndicator } from 'mand-mobile'
Vue.component(ActivityIndicator.name, ActivityIndicator)

代码演示

Roller

<template>
  <div class="md-example-child md-example-child-md-activity-indicator md-example-child-md-activity-indicator-0">
    <md-activity-indicator
      :size="20"
      :text-size="16"
    >加载中...</md-activity-indicator>
    <md-activity-indicator
      :size="20"
      :text-size="16"
      vertical
    >vertical loading</md-activity-indicator>
    <md-activity-indicator
      class="md-activity-indicator-css"
      color="#048efa"
    >loading...</md-activity-indicator>
    </div>
</template>
<script>
import {ActivityIndicator} from 'mand-mobile'
export default {
  name: 'activity-indicator-demo',
  title: 'Roller',
  components: {
    [ActivityIndicator.name]: ActivityIndicator,
  },
}
</script>
<style lang="stylus">
.md-example-child-md-activity-indicator-0
  display flex
  flex-direction column
  align-items center
  .md-activity-indicator
    margin-bottom 30px
    &.md-activity-indicator-css
      .md-activity-indicator-svg
        width 40px !important
        height 40px !important
      .md-activity-indicator-text
        font-size 32px
</style>
                

Carousel

<template>
  <div class="md-example-child md-example-child-md-activity-indicator md-example-child-md-activity-indicator-2">
    <md-activity-indicator
      type="carousel"
      :size="15"
    ></md-activity-indicator>
    <md-button>
      <md-activity-indicator
        class="md-activity-indicator-css"
        type="carousel"
        :size="15"
        color="#fff"
        text-color="#fff"
      >正在支付</md-activity-indicator>
    </md-button>
    </div>
</template>
<script>
import {ActivityIndicator, Button} from 'mand-mobile'
export default {
  name: 'activity-indicator-demo',
  title: 'Carousel',
  components: {
    [ActivityIndicator.name]: ActivityIndicator,
    [Button.name]: Button,
  },
}
</script>
<style lang="stylus">
.md-example-child-md-activity-indicator-2
  display flex
  flex-direction column
  align-items center
  .md-activity-indicator
    margin-bottom 30px
  .md-button
    .md-activity-indicator-css
      margin-bottom 0
      .md-activity-indicator-svg
        height 15px !important
</style>
                

Spinner

<template>
  <div class="md-example-child md-example-child-md-activity-indicator md-example-child-md-activity-indicator-1">
    <md-activity-indicator
      type="spinner"
      :size="30"
      :text-size="20"
    >加载中...</md-activity-indicator>
    <div class="activity-indicator-container">
      <md-activity-indicator
        class="md-activity-indicator-css"
        type="spinner"
        :size="30"
        :text-size="20"
        color="light"
      >加载中...</md-activity-indicator>
    </div>
    </div>
</template>
<script>
import {ActivityIndicator} from 'mand-mobile'
export default {
  name: 'activity-indicator-demo',
  title: 'Spinner',
  components: {
    [ActivityIndicator.name]: ActivityIndicator,
  },
}
</script>
<style lang="stylus">
.md-example-child-md-activity-indicator-1
  display flex
  flex-direction column
  align-items center
  .md-activity-indicator
    margin-bottom 30px
  .activity-indicator-container
    margin-bottom 30px
    padding 15px 20px
    background rgba(0, 0, 0, .7)
    border-radius 4px
    .md-activity-indicator-css
      margin-bottom 0
      .md-activity-indicator-svg
        width 40px !important
        height 40px !important
      .md-activity-indicator-text
        font-size 28px !important
</style>
                

API

ActivityIndicator Props