酷炫加载 加载动画 等待动画 loading

插件 ID: 20613
来源: https://ext.dcloud.net.cn/plugin?id=20613
纯css加载动画,一个标签元素即可实现炫酷的loading效果

---

更新记录

                                                    1.0.2（2024-10-18）
                                                                                                                [
                                                            下载此版本
                                                        ](javascript:void(0))

添加新的动画效果

                                                    1.0.1（2024-10-15）
                                                                                                                [
                                                            下载此版本
                                                        ](javascript:void(0))

添加新的动画

                                                    1.0.0（2024-10-15）
                                                                                                                [
                                                            下载此版本
                                                        ](javascript:void(0))

初始化 查看更多

平台兼容性

uni-app

| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 | | | √ | √ | √ | √ | √ |

• |
• |
• |
• | | | 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 | | | √ | √ | √ | √ | √ | √ |
• | √ | √ |
• | √ | √ | |

其他

| 多语言 | 暗黑模式 | 宽屏模式 | | | × | × | √ | |

xtf-loader 酷炫加载view

支持vue android ios 微信小程序等

不支持uniappx

    <xtf-loader1 class="item"></xtf-loader1>
    <xtf-loader2  class="item"></xtf-loader2>
    <xtf-loader3  class="item"></xtf-loader3>
    <xtf-progressview style="width: 400rpx;"></xtf-progressview>
    <xtf-loader4 style="margin-top: 30rpx;"></xtf-loader4>
    <xtf-loader6 style="margin-top: 30rpx;"></xtf-loader6> 
    <xtf-loader7 style="margin-top: 30rpx;"></xtf-loader7>
    <xtf-loader8 style="margin-top: 30rpx;"></xtf-loader8>
    <xtf-loader9 class="item"></xtf-loader9>
    <xtf-loader10 class="item"></xtf-loader10>
    <xtf-loader11 style="margin-top: 30rpx;"></xtf-loader11>
    <xtf-loader12 style="margin-top: 80rpx;margin-bottom: 80rpx;"></xtf-loader12>
    <xtf-loader13 style="margin-top: 80rpx;margin-bottom: 80rpx;"></xtf-loader13>
    <xtf-loader14 style="margin-top: 80rpx;margin-bottom: 80rpx;"></xtf-loader14>
    <xtf-loader15 style="margin-top: 80rpx;margin-bottom: 80rpx;margin-left: 180rpx;"></xtf-loader15>
    <xtf-loader16 style="margin-top: 80rpx;margin-bottom: 80rpx;"></xtf-loader16>