更新记录

1.0.1（2023-12-06）

更新示例图

1.0.0（2023-12-06）

首次更新8种加载效果，支持颜色，大小，蒙版等参数

平台兼容性

手机扫码预览

注意事项

样式上使用了scss，结构简单，动画使用纯css3实现，vue2&vue3都可使用。后续会持续更新新的加载效果。文件大小不大，对文件大小有要求的可选择想要的加载效果提取出来，每种加载效果都是一个独立小组件

使用方法

<yi-loading type="audio" color="#ffaa00" center ></yi-loading>

参数

简单示例文件

<template>
    <view class="page">
        <view class="card">
            <view class="title">ring</view>
            <view class="content">
                <yi-loading center></yi-loading>
            </view>
        </view>
        <view class="card">
            <view class="title">ripple</view>
            <view class="content">
                <yi-loading type="ripple" color="red" center mask></yi-loading>
            </view>
        </view>
        <view class="card">
            <view class="title">ring-double</view>
            <view class="content">
                <yi-loading type="ring-double" color="red" center></yi-loading>
            </view>
        </view>
        <view class="card">
            <view class="title">point</view>
            <view class="content">
                <yi-loading type="point" color="#ffaa00" center :size="20"></yi-loading>
            </view>
        </view>
        <view class="card">
            <view class="title">graden</view>
            <view class="content">
                <yi-loading type="graden" color="#ffaa00" center ></yi-loading>
            </view>
        </view>
        <view class="card">
            <view class="title">audio</view>
            <view class="content">
                <yi-loading type="audio" color="#ffaa00" center ></yi-loading>
            </view>
        </view>
        <view class="card">
            <view class="title">point-ring</view>
            <view class="content">
                <yi-loading type="point-ring" color="#ffaa00" center ></yi-loading>
            </view>
        </view>
        <view class="card">
            <view class="title">block</view>
            <view class="content">
                <yi-loading type="block" color="#ffaa00" center></yi-loading>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        methods: {
        }
    }
</script>

<style lang="scss">
    .page {
        display: flex;
        flex-wrap: wrap;
        .card{
            width: 375rpx;
            .title{
                font-size: 16px;
                text-align: center;
                line-height: 30px;
            }
            .content{
                height: 100px;
            }
        }
    }
</style>

个人博客

博客地址：http://www.masteryi.cn (近期忙着工作打理的少，稳定后会持续更新各类插件与文章上去，求关注)