更新记录

1.0.2（2023-06-15） 下载此版本

优化

1.0.1（2023-06-09） 下载此版本

优化

1.0.0（2023-06-07） 下载此版本

初始版本

平台兼容性

piaoyi-loader-animate css loader加载动画特效

使用示例如下：

<template>
    <view class="loader-animate">
        <view class="header">
            <view class="header-title">简单CSS加载动画</view>
            <view class="header-subtitle">单个html元素css动画</view>
        </view>
        <view class="grid">
            <view class="grid-item" v-for="(item, index) in 9">
                <piaoyi-loader-animate :type="'loader' + (index + 1)"></piaoyi-loader-animate>
            </view>
        </view>
    </view>
</template>

<script>
    import piaoyiLoaderAnimate from '@/components/piaoyi-loader_animate/piaoyi-loader_animate.vue'
    export default {
        data() {
            return {

            };
        },
        components: {
            piaoyiLoaderAnimate
        }
    }
</script>

<style lang="scss">
.loader-animate {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
    font-family: 'Noto Sans', sans-serif;
    color: white;
    text-align: center;
    letter-spacing: 0.3px;
    .header {
        margin-bottom: 4vmin;
    }

    .header-title {
        font-size: 3.75vmin;
    }

    .header-subtitle {
        font-size: 2vmin;
        text-transform: uppercase;
        opacity: 0.6;
    }
    .grid {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20rpx;
    }
}
</style>

使用说明

此插件包含多种炫酷加载动画，直接引入插件，使用css，不存在兼容问题

Prop

可接定制化组件开发

右侧有本人代表作小程序二维码，可以扫码体验

如使用过程中有问题或有一些好的建议，欢迎加QQ群互相学习交流：120594820