first
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
## 1.0.4（2023-04-18）
|
||||
修复小程序端显示问题。
|
||||
## 1.0.3（2023-04-18）
|
||||
增加新的配置项。
|
||||
## 1.0.2（2023-04-18）
|
||||
增加转速参数。
|
||||
## 1.0.1（2023-04-18）
|
||||
修复小程序显示问题。
|
||||
## 1.0.0（2023-04-18）
|
||||
ljs-loading，美观的loading组件，让你的产品提高N++个Level。
|
||||
@@ -0,0 +1,39 @@
|
||||
export default {
|
||||
// emits: ['input', 'update:value'],
|
||||
props: {
|
||||
// 转速，单位秒
|
||||
speed: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
// 高斯模糊
|
||||
gaussian: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 背景透明度，0~1的数字。
|
||||
bgOpacity: {
|
||||
type: Number,
|
||||
default: 0.5
|
||||
},
|
||||
// solt字体颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#FFF'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
// #ifdef H5
|
||||
// document.getElementById('ljs-loading').style.setProperty('--time', this.speed);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
|
||||
$count: 200;
|
||||
$loadingHeadColor: hsl(130, 75%, 75%);
|
||||
$loadingEndColor: hsl(60, 75%, 40%);
|
||||
.ljs-loading{
|
||||
--speed: 3; // 圆环
|
||||
--gaussian: 10; // 高斯模糊
|
||||
--bgopacity: 0.9; // 背景透明度
|
||||
--textcolor: '#FFF'; // 字体颜色
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10001;
|
||||
background-color: rgba($color: #000000, $alpha: var(--bgopacity));
|
||||
display: grid;
|
||||
place-content: center;
|
||||
overflow: hidden;
|
||||
.text{
|
||||
text-align: center;
|
||||
padding: 100upx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--textcolor);
|
||||
}
|
||||
.g-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 100upx;
|
||||
filter: blur(calc(var(--gaussian) * 1upx)) contrast(3);
|
||||
animation: hueRotate 8s infinite linear;
|
||||
.g-circle {
|
||||
position: relative;
|
||||
width: 300upx;
|
||||
height: 300upx;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient($loadingHeadColor 0,
|
||||
$loadingHeadColor 2%,
|
||||
hsl(120, 75%, 70%),
|
||||
hsl(110, 75%, 65%),
|
||||
hsl(100, 75%, 60%),
|
||||
hsl(90, 75%, 55%),
|
||||
hsl(80, 75%, 50%),
|
||||
hsl(70, 75%, 45%),
|
||||
$loadingEndColor 16%,
|
||||
$loadingEndColor 18%,
|
||||
transparent 18%);
|
||||
// background-image: radial-gradient(transparent, transparent 119upx, #000 120upx, #000);
|
||||
-webkit-mask: radial-gradient(transparent, transparent 119upx, #000 120upx, #000);
|
||||
mask: radial-gradient(transparent, transparent 119upx, #000 120upx, #000);
|
||||
animation: rotate calc(var(--speed)*1s) infinite calc(700 / 4 * var(--speed) * -1ms) linear;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 32upx;
|
||||
height: 32upx;
|
||||
background: $loadingHeadColor;
|
||||
top: 0;
|
||||
left: 135upx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: $loadingEndColor;
|
||||
left: unset;
|
||||
top: 80upx;
|
||||
right: 10upx;
|
||||
}
|
||||
}
|
||||
|
||||
.g-bubbles {
|
||||
position: absolute;
|
||||
width: 30upx;
|
||||
height: 30upx;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
border-radius: 50upx;
|
||||
}
|
||||
|
||||
.g-bubble {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: $loadingEndColor;
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.g-bubble:nth-child(#{$i}) {
|
||||
--rotate: calc(#{360 / $count} * #{$i} * 1deg);
|
||||
--delayTime: calc(var(--speed) * 1000 * #{$i / $count} * -1ms);
|
||||
--width: 30upx;
|
||||
--scale: #{0.4 + random(10) / 10};
|
||||
--x: #{-100 + random(200)}upx;
|
||||
--y: #{-100 + random(200)}upx;
|
||||
width: var(--width);
|
||||
height: var(--width);
|
||||
transform:
|
||||
rotateZ(var(--rotate)) translate(135upx, 0);
|
||||
opacity: 1;
|
||||
animation: showAndHide calc(var(--speed)*1000ms) linear var(--delayTime) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showAndHide {
|
||||
0% {
|
||||
transform:
|
||||
rotateZ(var(--rotate)) translate(135upx, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
75.1% {
|
||||
transform:
|
||||
rotateZ(var(--rotate)) translate(135upx, 0) scale(var(--scale));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform:
|
||||
rotateZ(var(--rotate)) translate(calc(135upx + var(--x)), var(--y)) scale(.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hueRotate {
|
||||
100% {
|
||||
filter: blur(calc(var(--gaussian) * 1upx)) contrast(3) hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<!--
|
||||
全页面的Loading样式
|
||||
-->
|
||||
<template>
|
||||
<view
|
||||
class="ljs-loading"
|
||||
id="ljs-loading"
|
||||
ref="ljsLoading"
|
||||
:style="{
|
||||
'--speed': speed,
|
||||
'--gaussian': gaussian,
|
||||
'--bgopacity': bgOpacity,
|
||||
'--textcolor': textColor
|
||||
}">
|
||||
<view class="text">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="g-container">
|
||||
<view class="g-circle"></view>
|
||||
<view class="g-bubbles">
|
||||
<view class="g-bubble" v-for="index in 200" :key="index"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import index from './index.js';
|
||||
export default index;
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
{
|
||||
"id": "ljs-loading",
|
||||
"displayName": "加载 loading组件 美观 漂亮 ljs-loading",
|
||||
"version": "1.0.4",
|
||||
"description": "ljs-loading，美观的loading组件，让你的产品提高N个Level。",
|
||||
"keywords": [
|
||||
"loading",
|
||||
"加载",
|
||||
"等待",
|
||||
"转圈",
|
||||
"稍后"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
# 方便您的同时，请五星、收藏，让好的东西照亮更多深渊中负重前行的代码人。
|
||||
# 创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。
|
||||
|
||||
# 简介
|
||||
ljs-loading，美观的loading组件，让你的产品提高N++个Level。
|
||||
|
||||
# 快速开始
|
||||
### 1.使用 uni_modules 安装（推荐）
|
||||
使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ljs-loading 组件。
|
||||
|
||||
### 主参数
|
||||
|
||||
参数 | 类型| 必填项 | 默认值 | 说明
|
||||
---- | ----- | ------ | ------ | :------
|
||||
speed | Number | × | 3 | 转速，单位秒
|
||||
gaussian | Number | × | 1 | 高斯模糊
|
||||
bgOpacity | Number | × | 0.5 | 背景透明度，0~1的数字。
|
||||
textColor | String | × | #FFF | solt字体颜色。
|
||||
插槽 | slot | × | | 插槽，可插入文字显示内容。
|
||||
|
||||
### 方法
|
||||
|
||||
参数 | 类型| 解释
|
||||
---- | ----- | :------
|
||||
|
||||
### 快速应用
|
||||
###### 官方示例
|
||||
```
|
||||
<template>
|
||||
<view class="content">
|
||||
<ljs-loading v-if="loading">加载中....</ljs-loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
# 贡献代码
|
||||
龙九山。有任何问题，请在平台留言，在手头宽裕得情况下，我会尽快修复问题。
|
||||
|
||||
Reference in New Issue
Block a user