账户中心 退出系统
5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
快速开始
动画库介绍
下载及部署
基础组件
animate.css 动画组件
animate.css 连贯动画
gal-api-animate 组件
文本动画
文本淡入淡出
文本背景动画
数值展示动画
按钮动画
提交按钮动画
边框动画按钮
点赞按钮动画
常用动画
全屏加载动画
渐变背景动画
时钟动画
红包雨动画
全屏加载动画

组件介绍

gal-sloading 是一个全屏加载动画组件,可以用于 api 交互过程。

兼容平台

H5APP小程序NVUE

组件属性

属性名称类型默认值作用
sizeNumber50
加载图标尺寸
backgroundStringrgba(255,255,255,0.92)遮罩层背景颜色
titleStringloading
加载过程提示文本
colorsArray['#FF6347', '#D6FF7F', '#9055FF', '#c4d8f0']加载图标颜色

组件函数

1. loading() 打开加载动画;
2. stop() 停止(关闭)动画;

演示代码

<template>
	<view class="gal-body">
		<view class="gal-margin-top-large">
			<text class="gal-block-text gal-h5 gal-color-gray">全屏加载演示</text>
		</view>
		<view class="gal-text-center" 
		style="margin-top: 100rpx;" 
		@tap="startLoading">
			<text class="gal-block-text gal-text" style="color: #3688FF;">点击这里打开 Loading 动画</text>
		</view>
		
		<gal-sloading ref="sloading"></gal-sloading>
	</view>
</template>
<script>
export default {
	data() {
		return {
			
		}
	},
	onLoad:function(){
		setTimeout(()=>{
			this.$refs.sloading.stop();
		}, 2000);
	},
	methods: {
		startLoading : function () {
			this.$refs.sloading.loading();
			setTimeout(()=>{
				this.$refs.sloading.stop();
			},3000);
		}
	}
}
</script>
<style>

</style>