AI 助理
文档备案控制台
开发者社区 云计算 文章 正文

最受欢迎的三方库之SpinKit

2025-06-25 257
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： SpinKit 是一款适用于 OpenHarmony/HarmonyOS 的加载动画库，提供多种动画类型与自定义配置，帮助开发者轻松实现美观的加载效果。

SpinKit(API12)

🏆简介与推荐

SpinKit
是一个适用于OpenHarmony/HarmonyOS的加载动画库。

harmony-utils
一款功能丰富且极易上手的HarmonyOS工具库，借助众多实用工具类，致力于助力开发者迅速构建鸿蒙应用。

harmony-dialog
一款极为简单易用的零侵入弹窗，仅需一行代码即可轻松实现，无论在何处都能够轻松弹出。

📚下载安装

ohpm i @pura/spinkit

OpenHarmony ohpm
环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

📚效果图

效果图略有卡顿，请运行源码或添加依赖，查看效果。
SpinKit

📚SpinKit组件

属性 介绍
spinType 动画的类型
spinSize 动画的大小，默认60
spinColor 动画的颜色，默认白色 
  SpinKit()

  SpinKit({ spinType: SpinType.spinA })

  SpinKit({ spinType: SpinType.spinH })

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

加载弹框请移步 harmony-dialog

示例代码

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)
  }
}

💖沟通与交流🙏

使用过程中发现任何问题都可以提 Issue给我们；
当然，我们也非常欢迎你给我们发 PR 。

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

🌏开源协议

本项目基于 Apache License 2.0 ，在拷贝和借鉴代码时，请大家务必注明出处。

文章标签：
开发者
Apache
童长老
目录
相关文章
童长老
|
8月前
|
存储 前端开发 安全
最受欢迎的三方库之picker_utils
picker_utils 是从 harmony-utils 拆分出的子库，包含 PickerUtil、PhotoHelper 和 ScanUtil 三个模块。主要解决在不使用 picker 功能时，避免隐私政策中声明相机和存储权限的问题。支持拍照、文件选择与保存、相册操作、扫码与码图生成等功能，适配 OpenHarmony API12+，遵循 Apache License 2.0 协议。
童长老
192 0
童长老
|
存储 JSON 生物认证
harmony-utils之AssetUtil，关键资产存储服务工具类
AssetUtil 是 harmony-utils 工具库中的关键资产存储服务工具类，提供新增、查询、删除资产等功能，支持同步与异步操作，适用于 HarmonyOS 应用开发。
童长老
221 0
童长老
|
8月前
|
JSON 生物认证 API
harmony-utils之StrUtil，字符串工具类
harmony-utils 是一款专为HarmonyOS开发的高效工具库，提供丰富的字符串处理功能。其字符串工具类StrUtil支持判空、去空格、替换、大小写转换、编码转换等常用操作，简化字符串处理逻辑，提升开发效率。适用于鸿蒙应用开发中的各类字符串场景。
童长老
296 0
童长老
|
8月前
|
JSON 安全 生物认证
harmony-utils之RandomUtil，随机工具类
harmony-utils 是一款功能强大的 HarmonyOS 工具库，提供丰富的实用类与方法，助力开发者高效构建鸿蒙应用。其中 RandomUtil 类可生成随机布尔值、整数、字符串、汉字、颜色、UUID 等，支持多种随机数据生成场景，使用简单，适用于测试、安全、界面展示等多种用途。
童长老
301 0
童长老
|
JSON API Apache
最受欢迎的三方库之china_area
`@nutpi/china_area` 是一款提供中国省、市、县三级区域数据的 OpenHarmony 工具库，支持同步与异步调用方式，便于快速集成至鸿蒙应用中。配套 `@pura/harmony-utils` 与 `@pura/harmony-dialog` 可实现高效开发，如地区选择器等交互功能。API 简洁易用，附有完整示例代码，助力开发者提升效率。项目遵循 Apache License 2.0 协议，欢迎参与共建。
童长老
245 0
童长老
|
8月前
|
API Apache Android开发
最受欢迎的三方库之harmony-web
`harmony-web` 是基于鸿蒙 WebView 构建的轻量级库，提供丰富的功能与问题解决方案，简化 WebView 开发。结合 `harmony-utils` 与 `harmony-dialog`，可快速构建高效、易用的鸿蒙应用。支持 ArkWeb 组件与多种配置选项，助力开发者高效实现网页加载、交互及弹窗功能。开源协议为 Apache License 2.0。
童长老
257 0
童长老
|
API Apache 开发者
最受欢迎的三方库之EventBus
EventBus 是一款支持 Sticky 和跨 App 广播的消息总线，适用于 HarmonyOS 开发。提供丰富的 API，如事件监听、消息发布等，助力高效构建应用。
童长老
243 0
童长老
|
JSON 生物认证 API
harmony-utils之KeyboardUtil，键盘工具类
harmony-utils 是一款功能强大的 HarmonyOS 工具库，提供丰富的工具类以提升开发效率。其子库 picker_utils 包含 PickerUtil、PhotoHelper 和 ScanUtil，适用于各类应用开发场景。
童长老
178 0
童长老
|
JSON 生物认证 API
harmony-utils之JSONUtil，JSON工具类
harmony-utils之JSONUtil是一款HarmonyOS平台下的高效JSON处理工具类，支持JSON字符串与对象、数组、Map之间的相互转换，简化数据解析与操作，提升开发效率。
童长老
258 0
童长老
|
缓存 JSON 生物认证
harmony-utils之CacheUtil，缓存工具类
CacheUtil 是 harmony-utils 工具库中的缓存操作类，提供 has、put、get、remove、isEmpty、clear 等方法，方便开发者高效管理应用缓存数据，提升开发效率。
童长老
194 0

热门文章

最新文章

  • 1
    ESXI8.0安装Windows11
  • 2
    我们的算法少女
  • 3
    webrtc学习: 部署stun和turn服务器
  • 4
    SLS机器学习最佳实战：批量时序异常检测
  • 5
    Docker 在 openSUSE 下的安装、使用
  • 6
    Hello world
  • 7
    第十章--系统调用
  • 8
    [Android]Gradle 插件 DiscardFilePlugin（class注入&清空类和方法）
  • 9
    Strip JS – 低侵入，响应式的 Lightbox 效果
  • 10
    使用delphi 开发多层应用（十一）使用kbmMW 开发webserver
  • 1
    RAG灵魂第一步：掌握这5种文档切分技巧，轻松让AI“读懂”你的资料库
    50
  • 2
    Node.js安装 -> 使用
    29
  • 3
    手把手教你安装 OpenClaw/Clawdbot 智能AI助手（超详细步骤/新手跟着走）
    122
  • 4
    batch size、sequence length 对显存的非线性影响
    43
  • 5
    告别断言阻塞！Pytest 原生神器 Subtests 实战教程
    51
  • 6
    Playwright扩展开发：自定义插件与工具创建
    64
  • 7
    阿里云五种OpenClaw(Clawdbot)快速部署方案，总有一种适合你！
    243
  • 8
    OpenClaw（Clawdbot/Moltbot）AI 助手一键部署保姆级教程及2026年常见问题解答
    87
  • 9
    🦞 OpenClaw部署保姆级指南：2026年如何在OpenClaw（Clawdbot/Moltbot）配置阿里云百炼 API
    148
  • 10
    算力不是越近越好：从边缘到中心，一场正在发生的再分配
    38

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    第五届伏魔挑战赛如约来袭，诚邀各路高手来战！