SpinKit(API12)

---

🏆Introduction and Recommendations

SpinKit is a loading animation library for OpenHarmony/HarmonyOS.

harmony-utils A HarmonyOS tool library with rich features and extremely easy to use, with the help of many practical tools, is committed to helping developers quickly build Hongmeng applications.

harmony-dialog An extremely simple and easy-to-use zero-invasion pop-up window, which can be easily implemented with just one line of code, and can be easily popped up no matter where you are.

📚Download and install

ohpm i @pura/spinkit

OpenHarmony ohpm For more information, please refer to如何安装 OpenHarmony ohpm 包

📚Result Picture

The renderings are slightly stumbled, please run the source code or add dependencies to view the effect.

📚SpinKit Component

  SpinKit()

  SpinKit({ spinType: SpinType.spinA })

  SpinKit({ spinType: SpinType.spinH })

  SpinKit({
     spinType: SpinType.spinA,
     spinColor: Color.Pink,
     spinSize: 70
  })

Please move the loading boxharmony-dialog

Full Code Example

---

import { SpinKit, SpinType } from '@pura/spinkit';
import { ComposeTitleBar } from '@kit.ArkUI';
import { ClickUtil, ToastUtil } from '@pura/harmony-utils';
import { DialogHelper } from '@pura/harmony-dialog';

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller();

  aboutToAppear(): void {

  }

  build() {
    Column() {
      ComposeTitleBar({
        title: $r('app.string.spin_kit'),
        subtitle: $r('app.string.spinKit_desc'),
      })
      Divider()
      Scroll(this.scroller) {
        Column({ space: 15 }) {
          Button('加载框样式配置1')
            .fontFamily('MyFont')
            .width('100%')
            .backgroundColor(Color.Grey)
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              DialogHelper.setDefaultConfig((config) => {
                config.loading_loadType = SpinType.spinZ; //动画类型
                config.loading_loadSize = 60; //加载动画或进度条的大小
                config.loading_loadColor = "#0A51E0"; //加载动画或进度条的颜色
                config.loading_content = ''; //加载动画的提示文字
                config.loading_fontSize = 16; //文字大小
                config.loading_fontColor = Color.White; //文字颜色
                config.loading_backgroundColor = '#CC000000'; //背景颜色，八位色值前两位为透明度
                config.loading_borderRadius = 10; //背景圆角
                config.loading_marginTop = 20; //文字与动画的间距
                config.loading_padding = 30; //padding
              })
              ToastUtil.showToast("样式配置成功！");
            })
          Button('加载框样式配置2')
            .fontFamily('MyFont')
            .width('100%')
            .backgroundColor(Color.Grey)
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              DialogHelper.setDefaultConfig((config) => {
                config.loading_loadType = SpinType.spinH; //动画类型
                config.loading_loadSize = 70; //加载动画或进度条的大小
                config.loading_loadColor = Color.Brown; //加载动画或进度条的颜色
                config.loading_content = '努力加载中'; //加载动画的提示文字
                config.loading_fontSize = 16; //文字大小
                config.loading_fontColor = Color.White; //文字颜色
                config.loading_backgroundColor = '#EE000000'; //背景颜色，八位色值前两位为透明度
                config.loading_borderRadius = 12; //背景圆角
                config.loading_marginTop = 20; //文字与动画的间距
                config.loading_padding = { top: 35, right: 45, bottom: 30, left: 45 }; //padding
              })
              ToastUtil.showToast("样式配置成功！");
            })
          Button('加载框，样式一')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                let dialogId = DialogHelper.showLoadingDialog({ autoCancel: false })
                let timeoutID = setTimeout(() => {
                  DialogHelper.closeDialog(dialogId);
                  clearTimeout(timeoutID);
                }, 15000)
              })
            })
          Button('加载框，样式二')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                let dialogId = DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinH,
                  autoCancel: false,
                  onDidDisappear: () => {
                    ToastUtil.showToast("加载框关闭了")
                  }
                })
                let timeoutID = setTimeout(() => {
                  DialogHelper.closeDialog(dialogId);
                  clearTimeout(timeoutID);
                }, 15000)
              })
            })
          Button('加载框，样式三')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinK,
                  loadColor: '#0A66F9',
                  backgroundColor: '#CC000000',
                  maskColor: '#10000000'
                })
              })
            })
          Button('加载框，样式四')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinB,
                  loadColor: Color.White,
                  autoCancel: true
                })
              })
            })
          Button('加载框，样式五')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinP,
                  loadColor: Color.White,
                  loadSize: 70,
                  content: '加载中...',
                  fontSize: 18,
                  fontColor: Color.White,
                  backgroundColor: '#BB000000',
                  maskColor: '#33000000',
                  padding: { top: 30, right: 50, bottom: 30, left: 50 },
                  marginTop: 20,
                  autoCancel: true
                })
              })
            })
          Button('加载框，样式六')
            .fontFamily('MyFont')
            .width('100%')
            .fontColor($r('app.color.color_main'))
            .backgroundColor($r('app.color.card_background'))
            .shadow(ShadowStyle.OUTER_DEFAULT_MD)
            .onClick(() => {
              ClickUtil.throttle(() => {
                //自定义文字和加载动画的颜色
                DialogHelper.showLoadingDialog({
                  loadType: SpinType.spinD,
                  content: "努力加载中",
                  loadColor: Color.Red,
                  backgroundColor: '#990000FF',
                  fontColor: Color.Red,
                  fontSize: 18,
                  padding: 30,
                  borderRadius: 10
                })
              })
            })
          Blank().layoutWeight(1)
        }
        .padding({ left: 15, right: 15 })
        Divider()
        Grid() {
          GridItem() {
            SpinKit({ spinType: SpinType.spinA })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color1'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinB })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color2'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinC })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color3'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinD })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color4'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinE })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color5'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinF })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color6'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinG })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color7'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinH })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color8'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinI })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color9'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinJ })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color10'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinK })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color11'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinL })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color12'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinM })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color13'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinN })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color14'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinO })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color15'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinP })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color14'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinQ })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color13'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinR })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color12'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinS })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color11'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinT })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color10'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinU })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color9'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinV })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color8'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinW })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color7'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinX })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color6'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinY })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color5'))

          GridItem() {
            SpinKit({ spinType: SpinType.spinZ })
          }.aspectRatio(1)
          .backgroundColor($r('app.color.color4'))
        }
        .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')
        .columnsTemplate('1fr 1fr 1fr')
        .columnsGap(0)
        .rowsGap(0)
        .width('100%')
        .aspectRatio(3 / 9)
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }
}

💖 Communication and communication 🙏

Any problems found during use can be askedIssueGive us; Of course, we also welcome you to send us a messagePR 。

https://gitee.com/tongyuyan/harmony-utils
https://github.com/787107497

🌏Open Source Protocol

This project is based onApache License 2.0, when copying and borrowing codes, please be sure to indicate the source.