# SpinKit

**Repository Path**: hxhjava/spinkit

## Basic Information

- **Project Name**: SpinKit
- **Description**: SpinKit是一个适用于OpenHarmony/HarmonyOS的加载动画库

- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-10-21
- **Last Updated**: 2024-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SpinKit(API12 - 5.0.3.800)

--------------------------------------------------------------------------------

## 📚简介与推荐

[SpinKit](https://ohpm.openharmony.cn/#/cn/detail/@pura%2Fspinkit)
是一个适用于OpenHarmony/HarmonyOS的加载动画库

[harmony-utils](https://ohpm.openharmony.cn/#/cn/detail/@pura%2Fharmony-utils)
一款功能丰富且极易上手的HarmonyOS工具库，借助众多实用工具类，致力于助力开发者迅速构建鸿蒙应用。

[harmony-dialog](https://ohpm.openharmony.cn/#/cn/detail/@pura%2Fharmony-dialog)
一款极为简单易用的零侵入弹窗，仅需一行代码即可轻松实现，无论在何处都能够轻松弹出。

## 📚下载安装

`ohpm i @pura/spinkit`

OpenHarmony ohpm  
环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://ohpm.openharmony.cn/#/cn/help/downloadandinstall)

## 📚效果图

效果图略有卡顿，请运行源码或添加依赖，查看效果。     
![QQ群：569512366](spinkit/example/GIF.gif)

## 📚SpinKit组件

| 属性        | 介绍         |
|:----------|:-----------|
| spinType  | 动画的类型      |
| spinSize  | 动画的大小，默认60 |
| spinColor | 动画的颜色，默认白色 |

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

## 📚SpinKitHelper 加载框的方法与属性

| 方法                | 介绍                        |
|:------------------|:--------------------------|
| setGlobalConfig   | 设置全局统一样式，建议在UIAbility里初始化 |
| showLoading       | 显示加载框                     |
| hide              | 隐藏加载框                     |
| showCustomLoading | 显示自定义加载框                  |
| update            | 刷新自定义弹窗                   |
| isShowing         | 当前弹窗是否显示                  |
| closeDialog       | 关闭弹框                      |

| 属性              | 介绍                                             |
|:----------------|:-----------------------------------------------|
| uiContext       | 上下文，在设置全局统一样式，必须初始化该参数                         |
| spinType        | 动画的类型                                          |
| spinSize        | 动画的大小，默认60                                     |
| spinColor       | 动画的颜色，默认白色                                     |
| content         | 提示文字内容                                         |
| fontSize        | 提示文字大小                                         |
| fontColor       | 提示文字颜色                                         |
| marginTop       | 提示文字与动画的间距                                     |
| padding         | padding                                        |
| backgroundColor | 背景颜色，建议八位色值前两位为透明度                             |
| borderRadius    | 背景圆角                                           |
| maskColor       | Dialog蒙版颜色，默认Color.Transparent                 |
| autoCancel      | 是否允许点击遮障层退出，true表示关闭弹窗。false表示不关闭弹窗。           |
| backCancel      | 点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。 |

## 📚示例代码 [使用案例](https://gitee.com/tongyuyan/spinkit/blob/master/entry/src/main/ets/pages/Index.ets)

 ```
  //设置全局统一样式，在UIAbility的onCreate方法里初始化
  SpinKitHelper.setGlobalConfig((config) => {
    config.uiContext = this.context  //必须初始化上下文
    config.spinType = SpinType.spinD
    config.spinSize = 60
    config.spinColor = '#0A66F9'
    config.backgroundColor = '#CC000000'
    config.borderRadius = 10
    config.maskColor = '#22000000'
    config.autoCancel = false
  })
    
    
  //显示弹框
  SpinKitHelper.showLoading()
    
  SpinKitHelper.showLoading({
    spinType: SpinType.spinK,
  })
    
  SpinKitHelper.showLoading({
    spinType: SpinType.spinB,
    spinColor:Color.White,
    autoCancel: true
  })
  
  SpinKitHelper.showLoading({
    spinType: SpinType.spinP,
    spinColor: Color.White,
    spinSize: 70,
    content: '加载中...',
    fontSize: 18,
    fontColor: Color.White,
    backgroundColor: '#AA000000',
    maskColor: Color.Transparent,
    padding: { top: 30, right: 50, bottom: 30, left: 50 },
    marginTop: 20,
    autoCancel: true
  })
  

  //显示自定义弹框，具体使用,见DEMO源码
  let options: LoadingOptions = {
    spinType: SpinType.spinP,
    spinColor: Color.White,
    spinSize: 60,
    content: '拼命加载中',
    fontSize: 16,
    fontColor: Color.White,
    backgroundColor: '#CC000000',
    maskColor: "#22000000",
    borderRadius: 10,
    padding: { left: 32, right: 32, top: 30, bottom: 20 },
    marginTop: 20,
    autoCancel: false
  }
  SpinKitHelper.showCustomLoading(wrapBuilder(MyLoadingBuilder), options);


  //隐藏加载框
  SpinKitHelper.hide();
  
  
  //如果在子窗口调用加载框需要传UIContext
  SpinKitHelper.showLoading({
    uiContext: this.getUIContext(), //子窗口中调用加载框需要传UIContext
    spinType: SpinType.spinK,
  })
  
 ```

## 💖沟通与交流🙏

使用过程中发现任何问题都可以提 [Issue](https://gitee.com/tongyuyan/spinkit/issues)给我们；   
当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/tongyuyan/spinkit/pulls) 。

[https://gitee.com/tongyuyan/spinkit](https://gitee.com/tongyuyan/spinkit)  
[https://github.com/787107497](https://github.com/787107497)

QQ群：569512366

## 🌏开源协议

本项目基于 [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) ，在拷贝和借鉴代码时，请大家务必注明出处。