初次提交
This commit is contained in:
12
uni_modules/zero-loading/changelog.md
Normal file
12
uni_modules/zero-loading/changelog.md
Normal file
@ -0,0 +1,12 @@
|
||||
## 1.2.1（2022-09-09）
|
||||
增加齿轮动画 type=gear
|
||||
## 1.2.0（2022-05-27）
|
||||
1. 增加加载类型-剑气（sword），原子（atom）
|
||||
2. 默认类型改为 atom
|
||||
3. 遮罩透明度调整
|
||||
## 1.1.1（2022-04-02）
|
||||
更新使用说明
|
||||
## 1.1.0（2022-02-23）
|
||||
增加 type="love" 的心形加载动画
|
||||
## 1.0.0（2022-01-28）
|
||||
首次发布
|
||||
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="box">
|
||||
<view class="atom"></view>
|
||||
<view class="atom"></view>
|
||||
<view class="atom"></view>
|
||||
<view class="dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading-atom',
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.box {
|
||||
position: relative;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.dot{
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #0396FF;
|
||||
animation: dotbreath 2s linear infinite;
|
||||
}
|
||||
.atom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border-left-width: 6rpx;
|
||||
border-top-width: 6rpx;
|
||||
border-left-color: #0396FF;
|
||||
border-left-style: solid;
|
||||
border-top-style: solid;
|
||||
border-top-color: transparent;
|
||||
|
||||
}
|
||||
.atom:nth-of-type(1) {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
animation: atom1 1s linear infinite;
|
||||
}
|
||||
.atom:nth-of-type(2) {
|
||||
right: 0%;
|
||||
top: 0%;
|
||||
animation: atom2 1s linear infinite;
|
||||
}
|
||||
.atom:nth-of-type(3) {
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
animation: atom3 1s linear infinite;
|
||||
}
|
||||
@keyframes dotbreath {
|
||||
0% {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
50%{
|
||||
opacity:0.5;
|
||||
}
|
||||
100%{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
@keyframes atom1 {
|
||||
0% {
|
||||
transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes atom2 {
|
||||
0% {
|
||||
transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes atom3 {
|
||||
0% {
|
||||
transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- -->
|
||||
<view :style="{'position': position,'z-index':zIndex}" class="container" :class="mask?'mask':''" @click.prevent="handleClick">
|
||||
<view>
|
||||
<view class="main">
|
||||
<loading8 v-if="type=='atom'"></loading8>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import loading8 from "./static/loading-atom.vue"
|
||||
|
||||
|
||||
export default {
|
||||
name: "zero-loading",
|
||||
components: {
|
||||
loading8,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "atom"
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: "fixed"
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 9,
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.mask {
|
||||
z-index: 999 !important;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: rgba(7, 17, 27, .3);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
</style>
|
||||
80
uni_modules/zero-loading/package.json
Normal file
80
uni_modules/zero-loading/package.json
Normal file
@ -0,0 +1,80 @@
|
||||
{
|
||||
"id": "zero-loading",
|
||||
"displayName": "zero-loading(加载动画)",
|
||||
"version": "1.2.1",
|
||||
"description": "纯css加载动画, 一个标签元素即可实现炫酷的全屏loading效果",
|
||||
"keywords": [
|
||||
"loading",
|
||||
"加载动画",
|
||||
"css动画",
|
||||
"加载"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
uni_modules/zero-loading/readme.md
Normal file
50
uni_modules/zero-loading/readme.md
Normal file
@ -0,0 +1,50 @@
|
||||
# zero-loading
|
||||
|
||||
## 使用方法
|
||||
|
||||
导入 `uni_modules` 后直接使用即可
|
||||
|
||||
提供多种加载动画类型,传入 type 改变 loading 样式，不传默认 circle
|
||||
|
||||
### 全屏使用
|
||||
|
||||
```html
|
||||
<zero-loading v-if="loading"></zero-loading>
|
||||
```
|
||||
|
||||
### 局部使用
|
||||
|
||||
**父元素的 `position` 记得改为 `relative` 哦**
|
||||
|
||||
```html
|
||||
<zero-loading type="pulse" position="absolute"></zero-loading>
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数 | 类型 | 默认值 | 描述 |
|
||||
| -------- | ------- | ------ | ------------ |
|
||||
| type | String | atom | 样式 |
|
||||
| position | String | fixed | 定位方式 |
|
||||
| zIndex | Number | 9 | |
|
||||
| mask | Boolean | false | 是否需要遮罩 |
|
||||
|
||||
### type 可选值：
|
||||
|
||||
| type 值 | 描述 |
|
||||
| -------- | ---- |
|
||||
| gear | 齿轮 |
|
||||
| sword | 剑气 |
|
||||
| atom | 原子 |
|
||||
| circle | 圆环 |
|
||||
| love | 爱心 |
|
||||
| pulse | 脉冲 |
|
||||
| sun | 太阳 |
|
||||
| eyes | 眼睛 |
|
||||
| triangle | 三角 |
|
||||
| bounce | 弹跳 |
|
||||
|
||||
插件预览:
|
||||
|
||||
|
||||
> 预览的小程序不一定能及时更新当前插件
|
||||
Reference in New Issue
Block a user