# 加载（Spinner）

<template>
  <div class="wrapper">
    <dof-minibar title="8.8模态加载"></dof-minibar>
    <div class="title-box">
      <text class="title-text">基础样式</text>
    </div>
    <div class="spinner-box">
      <div class="rect-box">
        <dof-spinner type="colmo_rect"></dof-spinner>
        <text class="rect-text">加载中</text>
      </div>
      <div class="rect-box" style="background-color: transparent; margin-left: 60px;">
        <dof-spinner :styleConfig="{ width: '88px', height: '88px' }"></dof-spinner>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #f9f9f9;
}
.m-t-16 {
  margin-top: 16px;
}
.title-box {
  padding: 32px;
  background-color: #e5e5e8;
}
.title-text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  font-weight: 500;
}
.spinner-box {
  padding: 124px;
  display: flex;
  flex-direction: row;
}
.rect-box {
  width: 192px;
  height: 192px;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rect-text {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0px;
}

@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
}
</style>

<script>
import { DofMinibar, DofSpinner } from 'dolphin-weex-ui'
export default {
  components: { DofMinibar, DofSpinner },
  data: () => ({}),
  computed: {},
  created() {},
  methods: {}
}
</script>