Skip to content

visualcloud / Vmatrix-device-start

Go to a project
Commit 6c3b02f2 by hank
Options

bug

parent 643b3ca6
Showing with 585 additions and 573 deletions
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem': {
rootValue: 192.0,//136
propList: ['*']
}
// 'postcss-pxtorem': {
// rootValue: 192.0,//136
// propList: ['*']
// }
}
}
src/App.vue
......@@ -20,6 +20,10 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
* {
margin: 0;
......
src/views/Home.vue
<template>
<div class="home" ref="home">
<img class="logo" src="../assets/Vmatrix.png" alt />
<div ref="lunzi">
<!-- <img class="lunzi" src="../assets/图形2.png" alt /> -->
<div class="lunzi" v-if="true">
<turntable />
</div>
</div>
<div class="mainstandby" ref='mainstandby'>
<div class="mainstandby1">
<div class="title">Vmatrix-可视化云平台</div>
<div class="description">
<span>一个提供高质量的视觉、交互与创意效果的平台</span>
</div>
</div>
</div>
<div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
<div class="title" v-show="state === 'LAUNCH'">启动页</div>
<div class="content-container">
<div class="maininitqrcode" ref="maininitqrcode">
<div class="maininitqrcode1">
<div class="title">扫描二维码添加该设备</div>
<div class="description">
<span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span>
</div>
<div class="icon">
<div class="code">
<img :src="connectIdCode" alt />
</div>
<!-- <img :src="connectIdCode" alt=""> -->
</div>
</div>
</div>
<div class="mainbonding" ref='mainbonding'>
<div class="mainbonding1" ref='mainbonding1'>
<div class="title">正在配置网络</div>
<div class="description">
<span>配置网络时请您保持网络稳定</span>
</div>
<div class="icon">
<div class="phone">
<img src="../assets/phone.gif" alt />
</div>
<!-- <img :src="connectIdCode" alt=""> -->
</div>
</div>
</div>
</div>
<div class="bottom-tips">
<div class="bottom-tips-item" v-show="state == 'SHOW'">
<loading></loading>启动中，请稍后...
</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_BONDING'">
<loading></loading>正在绑定，请稍后...
</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_INIT_QRCODE'">初始化二维码页</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_STANDBY'">待机页面</div>
<div class="bottom-tips-item" v-show="isConnected">蓝牙已连接</div>
</div>
<div class="progress-container">
<div class="progress" v-show="isLoading">
<div class="progress2" ref="progress"></div>
</div>
<div class="progress" v-show="state == 'MAIN_BONDING' || state == 'MAIN_INIT_QRCODE'">
<div class="progress3"></div>
<div class="progress4" v-show="state == 'MAIN_BONDING'"></div>
</div>
</div>
<div class="bottom-code">
<div v-if="state == 'MAIN_STANDBY' || state == 'MAIN_USELESS'">
<img :src="qrcode" alt />
<div class="more">扫描了解更多</div>
</div>
</div>
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
</div>
<div class="home" ref="home">
<img class="logo" src="../assets/Vmatrix.png" alt />
<div ref="lunzi">
<!-- <img class="lunzi" src="../assets/图形2.png" alt /> -->
<div class="lunzi" v-if="true">
<turntable />
</div>
</div>
<div class="mainstandby" ref="mainstandby">
<div class="mainstandby1">
<div class="title">Vmatrix-可视化云平台</div>
<div class="description">
<span>一个提供高质量的视觉、交互与创意效果的平台</span>
</div>
</div>
</div>
<div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
<div class="title" v-show="state === 'LAUNCH'">启动页</div>
<div class="content-container">
<div class="maininitqrcode" ref="maininitqrcode">
<div class="maininitqrcode1">
<div class="title">扫描二维码添加该设备</div>
<div class="description">
<span>打开APP，点击“我的设备”右上角，选择“扫描添加”</span>
</div>
<div class="icon">
<div class="code">
<img :src="connectIdCode" alt />
</div>
<!-- <img :src="connectIdCode" alt=""> -->
</div>
</div>
</div>
<div class="mainbonding" ref="mainbonding">
<div class="mainbonding1" ref="mainbonding1">
<div class="title">正在配置网络</div>
<div class="description">
<span>配置网络时请您保持网络稳定</span>
</div>
<div class="icon">
<div class="phone">
<img src="../assets/phone.gif" alt />
</div>
<!-- <img :src="connectIdCode" alt=""> -->
</div>
</div>
</div>
</div>
<div class="bottom-tips">
<div class="bottom-tips-item" v-show="state == 'SHOW'">
<loading></loading>启动中，请稍后...
</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_BONDING'">
<loading></loading>正在绑定，请稍后...
</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_INIT_QRCODE'">初始化二维码页</div>
<div class="bottom-tips-item" v-show="state == 'MAIN_STANDBY'">待机页面</div>
<div class="bottom-tips-item" v-show="isConnected">蓝牙已连接</div>
</div>
<div class="progress-container">
<div class="progress" v-show="isLoading">
<div class="progress2" ref="progress"></div>
</div>
<div class="progress" v-show="state == 'MAIN_BONDING' || state == 'MAIN_INIT_QRCODE'">
<div class="progress3"></div>
<div class="progress4" v-show="state == 'MAIN_BONDING'"></div>
</div>
</div>
<div class="bottom-code">
<div v-if="state == 'MAIN_STANDBY' || state == 'MAIN_USELESS'">
<img :src="qrcode" alt />
<div class="more">扫描了解更多</div>
</div>
</div>
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
</div>
</template>
<script>
// @ is an alias to /src
import loading from "@/components/loading.vue";
import turntable from "@/components/turntable.vue";
const QRCode = require("qrcode");
import anime from "animejs/lib/anime.es.js";
// LAUNCH, // 启动页（预留）
// MAIN_INIT_QRCODE, // 初始化二维码页
// MAIN_BONDING, // 正在绑定
// MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页
export default {
// name: 'Home',
components: {
// HelloWorld
loading,
turntable
},
data() {
return {
qrcode: "http://www.maxrocky.com/",
link: "http://www.maxrocky.com/",
state: "",
loadingState: "",
connectIdCode: "",
isLoading: false,
isConnected: false
};
},
methods: {
toQRcode() {
QRCode.toDataURL(this.link, {
width: 500,
height: 500,
type: "image/png",
background: "#ffff",
color: {
// dark: "#ffff", // Blue dots
// light: "#0000" // Transparent background
}
})
.then(url => {
this.qrcode = url;
})
.catch(err => {
console.error(err);
});
},
showLoading() {
this.isLoading = true;
anime({
targets: this.$refs["progress"],
width: [
"10%",
"20%",
"30%",
"40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"98%"
],
duration: 10000
});
},
loadingFinished() {
anime({
targets: this.$refs["progress"],
width: "100%",
duration: 200
});
},
closeLoading() {
this.isLoading = false;
anime({
targets: this.$refs["progress"],
width: [0],
duration: 0
});
},
MAIN_STANDBY() {
anime({
targets: this.$refs["lunzi"],
translateX: ["-50%", 0],
scale: [0, 0.5, 1],
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 3000
});
},
MAIN_INIT_QRCODE() {
anime({
targets: this.$refs["lunzi"],
translateX: "-50%",
translateY: "-20%",
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 3000,
scale: [0, 1.3]
});
// @ is an alias to /src
import loading from "@/components/loading.vue";
import turntable from "@/components/turntable.vue";
},
MAIN_BONDING() {
anime({
targets: this.$refs["lunzi"],
translateX: "-50%",
translateY: "-20%",
// rotateY: [0, 360],
duration: 3000,
});
},
showTitle() {
anime({
targets: this.$refs["maininitqrcode"],
width: 1920,
easing: 'linear'
});
/*anime({
const QRCode = require("qrcode");
import anime from "animejs/lib/anime.es.js";
// LAUNCH, // 启动页（预留）
// MAIN_INIT_QRCODE, // 初始化二维码页
// MAIN_BONDING, // 正在绑定
// MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页
export default {
// name: 'Home',
components: {
// HelloWorld
loading,
turntable
},
data() {
return {
qrcode: "http://www.maxrocky.com/",
link: "http://www.maxrocky.com/",
state: "",
loadingState: "",
connectIdCode: "",
isLoading: false,
isConnected: false
};
},
methods: {
toQRcode() {
QRCode.toDataURL(this.link, {
width: 500,
height: 500,
type: "image/png",
background: "#ffff",
color: {
// dark: "#ffff", // Blue dots
// light: "#0000" // Transparent background
}
})
.then(url => {
this.qrcode = url;
})
.catch(err => {
console.error(err);
});
},
showLoading() {
this.isLoading = true;
anime({
targets: this.$refs["progress"],
width: [
"10%",
"20%",
"30%",
"40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"98%"
],
duration: 10000
});
},
loadingFinished() {
anime({
targets: this.$refs["progress"],
width: "100%",
duration: 200
});
},
closeLoading() {
this.isLoading = false;
anime({
targets: this.$refs["progress"],
width: [0],
duration: 0
});
},
MAIN_STANDBY() {
anime({
targets: this.$refs["lunzi"],
translateX: ["-50%", 0],
scale: [0, 0.5, 1],
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 3000
});
},
MAIN_INIT_QRCODE() {
anime({
targets: this.$refs["lunzi"],
translateX: "-50%",
translateY: "-20%",
translateZ: [-1000, 0],
// rotateY: [0, 360],
duration: 3000,
scale: [0, 1.3]
});
},
MAIN_BONDING() {
anime({
targets: this.$refs["lunzi"],
translateX: "-50%",
translateY: "-20%",
// rotateY: [0, 360],
duration: 3000
});
},
showTitle() {
anime({
targets: this.$refs["maininitqrcode"],
width: 1920,
easing: "linear"
});
/*anime({
targets: this.$refs["mainbonding"],
width: 0,
easing: 'linear'
......@@ -211,378 +207,389 @@
width: 0,
easing: 'linear'
});*/
},
showTitle2() {
anime({
targets: this.$refs["maininitqrcode"],
width: 0,
// easing: 'linear'
duration: 3000
});
anime({
targets: this.$refs["mainbonding"],
width: 1920,
easing: 'linear'
});
},
showTitle3() {
anime({
targets: this.$refs["mainbonding"],
left: 0,
duration: 0
});
anime({
targets: this.$refs["mainbonding1"],
left: 0,
duration: 0
});
anime({
targets: this.$refs["mainbonding"],
width: 0,
duration: 3000
});
anime({
targets: this.$refs["mainstandby"],
width: 1920,
easing: 'linear'
});
},
},
watch: {
isConnected: function(value) {
console.log(value);
// if (value) {
// alert(value);
// } else {
// alert(value);
// }
},
loadingState: function(value) {
switch(value) {
case "LOADING":
this.showLoading();
break;
case "SUCCESS":
this.loadingFinished();
break;
case "FAILED":
this.closeLoading();
break;
case "DOWNLOADING":
this.showLoading();
break;
}
},
state: function(value) {
switch(value) {
case "MAIN_INIT_QRCODE":
this.MAIN_INIT_QRCODE();
this.showTitle();
this.closeLoading();
break;
case "MAIN_BONDING":
this.showTitle2();
this.closeLoading();
this.MAIN_BONDING();
break;
case "MAIN_STANDBY":
this.MAIN_STANDBY();
this.showTitle3();
break;
}
},
showTitle2() {
anime({
targets: this.$refs["maininitqrcode"],
width: 0,
// easing: 'linear'
duration: 3000
});
anime({
targets: this.$refs["mainbonding"],
width: 1920,
easing: "linear"
});
},
showTitle3() {
anime({
targets: this.$refs["mainbonding"],
left: 0,
duration: 0
});
anime({
targets: this.$refs["mainbonding1"],
left: 0,
duration: 0
});
anime({
targets: this.$refs["mainbonding"],
width: 0,
duration: 3000
});
anime({
targets: this.$refs["mainstandby"],
width: 1920,
easing: "linear"
});
}
},
watch: {
isConnected: function(value) {
console.log(value);
// if (value) {
// alert(value);
// } else {
// alert(value);
// }
},
loadingState: function(value) {
switch (value) {
case "LOADING":
this.showLoading();
break;
case "SUCCESS":
this.loadingFinished();
break;
case "FAILED":
this.closeLoading();
break;
case "DOWNLOADING":
this.showLoading();
break;
}
},
state: function(value) {
switch (value) {
case "MAIN_INIT_QRCODE":
this.MAIN_INIT_QRCODE();
this.showTitle();
this.closeLoading();
break;
case "MAIN_BONDING":
this.showTitle2();
this.closeLoading();
this.MAIN_BONDING();
break;
case "MAIN_STANDBY":
this.MAIN_STANDBY();
this.showTitle3();
break;
}
}
},
mounted() {
this.MAIN_INIT_QRCODE();
window.addEventListener("resize", () => {
setZoom()
}, true);
const setZoom = () => {
var width = window.innerWidth;
var height = window.innerHeight;
let zoom = height / 1080;
if (width / height <= 16 / 9) {
zoom = width / 1920;
}
if (width / height >= 16 / 9) {
zoom = height / 1080;
}
},
mounted() {
this.MAIN_INIT_QRCODE();
window.addEventListener("resize", () => {
// document.body.style.zoom = window.innerWidth / 1920;
// this.$refs["home"].style.zoom = window.innerWidth/1920;
});
// document.body.style.zoom = window.innerWidth / 1920;
// alert(window.innerWidth)
// alert(window.innerHeight)
// this.$refs["home"].style.zoom = window.innerWidth/1920;
// this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
},
created() {
window.test = this;
this.toQRcode();
new Promise((resolve, reject) => {
if(!window.jsbridge) {
reject();
}
window.jsbridge.init();
window.jsbridge.onInited = success => {
success ? resolve() : reject();
};
}).then(() => {
QRCode.toDataURL(window.$jssdk("ble.connectId"), {
errorCorrectionLevel: "H",
width: 500,
height: 500
})
.then(url => {
this.connectIdCode = url;
})
.catch(err => {
console.error(err);
});
this.state = window.$jssdk("app.page");
this.isConnected = window.$jssdk("ble.isConnected");
window.$observer("ble.onConnectionStateChange", isConnected => {
this.isConnected = isConnected;
});
window.$observer("app.onPageChange", state => {
this.state = state.new;
});
window.$observer("app.onFilmLoadStateChange", state => {
this.loadingState = state;
});
});
// LAUNCH, // 启动页（预留）
// MAIN_INIT_QRCODE, // 初始化二维码页
// MAIN_BONDING, // 正在绑定
// MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页
}
};
console.log(zoom)
this.$refs["home"].style.zoom = zoom;
};
// document.body.style.zoom = window.innerWidth / 1920;
// alert(window.innerWidth)
// alert(window.innerHeight)
setZoom();
// this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
},
created() {
window.test = this;
this.toQRcode();
new Promise((resolve, reject) => {
if (!window.jsbridge) {
reject();
}
window.jsbridge.init();
window.jsbridge.onInited = success => {
success ? resolve() : reject();
};
}).then(() => {
QRCode.toDataURL(window.$jssdk("ble.connectId"), {
errorCorrectionLevel: "H",
width: 500,
height: 500
})
.then(url => {
this.connectIdCode = url;
})
.catch(err => {
console.error(err);
});
this.state = window.$jssdk("app.page");
this.isConnected = window.$jssdk("ble.isConnected");
window.$observer("ble.onConnectionStateChange", isConnected => {
this.isConnected = isConnected;
});
window.$observer("app.onPageChange", state => {
this.state = state.new;
});
window.$observer("app.onFilmLoadStateChange", state => {
this.loadingState = state;
});
});
// LAUNCH, // 启动页（预留）
// MAIN_INIT_QRCODE, // 初始化二维码页
// MAIN_BONDING, // 正在绑定
// MAIN_STANDBY, // 待机页
// SHOW; // 模版展示页
}
};
</script>
<style lang="scss" scoped>
.home {
height: 1080px;
width: 1920px;
margin: 0 auto;
background: url("../assets/01_启动页1.jpg") no-repeat center;
background-size: cover;
overflow: hidden;
position: relative;
perspective: 800px;
.lunzi {
width: 700px;
height: auto;
height: 700px;
position: absolute;
top: 210px;
left: calc(50% - 350px);
// transform-origin: 51.875% 45.73%;
// transform: rotate(0deg);
// animation: rotate 4s infinite forwards ease-in-out;
}
.logo {
top: 56px;
left: 101px;
position: absolute;
width: 157px;
height: 41px;
z-index: 1000;
}
.content-container {
.title {
font-size: 79px;
letter-spacing: 20px;
}
.description {
font-size: 30px;
}
.icon {
width: 1920px;
height: 200px;
position: absolute;
.code {
position: absolute;
top: 230px;
left: 50%;
margin-left: -99px;
background: white;
display: inline;
img {
display: block;
width: 198px;
height: 198px;
background: white;
}
}
.phone {
position: absolute;
top: 230px;
left: 50%;
margin-left: -76px;
display: inline;
img {
height: 86px;
}
}
}
}
.title {
font-size: 110px;
font-family: SourceHanSansCN;
font-weight: 500;
color: rgba(255, 255, 255, 1);
position: absolute;
width: 1920px;
white-space: nowrap;
text-align: center;
}
.maininitqrcode {
width: 0;
height: 500px;
position: absolute;
top: 50%;
margin-top: -160px;
overflow: hidden;
}
.maininitqrcode1 {
position: absolute;
height: 500px;
width: 1920px;
text-align: center;
}
.mainbonding {
width: 0;
height: 500px;
position: absolute;
top: 50%;
margin-top: -150px;
overflow: hidden;
right: 0;
}
.mainbonding1 {
position: absolute;
height: 500px;
width: 1920px;
text-align: center;
right: 0;
}
.mainstandby {
width: 0;
height: 500px;
position: absolute;
top: 50%;
margin-top: -180px;
overflow: hidden;
right: 0;
}
.mainstandby1 {
position: absolute;
height: 500px;
width: 1920px;
text-align: center;
right: 0;
}
.description {
width: 689px;
height: 31px;
font-size: 33px;
font-family: SourceHanSansCN;
font-weight: 400;
position: absolute;
width: 1920px;
top: 159px;
color: rgba(255, 255, 255, 1);
white-space: nowrap;
text-align: center;
}
.bottom-tips {
position: absolute;
bottom: 34px;
right: 63px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
.bottom-tips-item {
display: flex;
// align-items: top;
}
}
.bottom-code {
position: absolute;
bottom: 41px;
left: 109px;
img {
width: 131px;
height: 131px;
// width: 262px;
// height: 262px;
display: block;
background-color: white;
}
.more {
padding-top: 5px;
font-size: 19px;
font-family: SourceHanSansCN;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
}
}
.progress-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
.progress {
height: 2px;
width: 100%;
position: relative;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 2px;
margin-top: -60px;
.progress2 {
content: "";
position: absolute;
top: -1.5px;
left: 0;
height: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
width: 0;
}
.progress3 {
content: "";
position: absolute;
top: -1.5px;
left: 0;
height: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
width: 49%;
}
.progress4 {
content: "";
position: absolute;
top: -1.5px;
left: 50%;
height: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
width: 50%;
}
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.home {
height: 1080px;
width: 1920px;
margin: 0 auto;
background: url("../assets/01_启动页1.jpg") no-repeat center;
background-size: cover;
overflow: hidden;
position: relative;
perspective: 800px;
.lunzi {
width: 700px;
height: auto;
height: 700px;
position: absolute;
top: 210px;
left: calc(50% - 350px);
// transform-origin: 51.875% 45.73%;
// transform: rotate(0deg);
// animation: rotate 4s infinite forwards ease-in-out;
}
.logo {
top: 56px;
left: 101px;
position: absolute;
width: 157px;
height: 41px;
z-index: 1000;
}
.content-container {
.title {
font-size: 79px;
letter-spacing: 20px;
}
.description {
font-size: 30px;
}
.icon {
width: 1920px;
height: 200px;
position: absolute;
.code {
position: absolute;
top: 230px;
left: 50%;
margin-left: -99px;
background: white;
display: inline;
img {
display: block;
width: 198px;
height: 198px;
background: white;
}
}
.phone {
position: absolute;
top: 230px;
left: 50%;
margin-left: -76px;
display: inline;
img {
height: 86px;
}
}
}
}
.title {
font-size: 110px;
font-family: SourceHanSansCN;
font-weight: 500;
color: rgba(255, 255, 255, 1);
position: absolute;
width: 1920px;
white-space: nowrap;
text-align: center;
}
.maininitqrcode {
width: 0;
height: 500px;
position: absolute;
top: 50%;
margin-top: -160px;
overflow: hidden;
}
.maininitqrcode1 {
position: absolute;
height: 500px;
width: 1920px;
text-align: center;
}
.mainbonding {
width: 0;
height: 500px;
position: absolute;
top: 50%;
margin-top: -150px;
overflow: hidden;
right: 0;
}
.mainbonding1 {
position: absolute;
height: 500px;
width: 1920px;
text-align: center;
right: 0;
}
.mainstandby {
width: 0;
height: 500px;
position: absolute;
top: 50%;
margin-top: -180px;
overflow: hidden;
right: 0;
}
.mainstandby1 {
position: absolute;
height: 500px;
width: 1920px;
text-align: center;
right: 0;
}
.description {
width: 689px;
height: 31px;
font-size: 33px;
font-family: SourceHanSansCN;
font-weight: 400;
position: absolute;
width: 1920px;
top: 159px;
color: rgba(255, 255, 255, 1);
white-space: nowrap;
text-align: center;
}
.bottom-tips {
position: absolute;
bottom: 34px;
right: 63px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
.bottom-tips-item {
display: flex;
// align-items: top;
}
}
.bottom-code {
position: absolute;
bottom: 41px;
left: 109px;
img {
width: 131px;
height: 131px;
// width: 262px;
// height: 262px;
display: block;
background-color: white;
}
.more {
padding-top: 5px;
font-size: 19px;
font-family: SourceHanSansCN;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
}
}
.progress-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
.progress {
height: 2px;
width: 100%;
position: relative;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 2px;
margin-top: -60px;
.progress2 {
content: "";
position: absolute;
top: -1.5px;
left: 0;
height: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
width: 0;
}
.progress3 {
content: "";
position: absolute;
top: -1.5px;
left: 0;
height: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
width: 49%;
}
.progress4 {
content: "";
position: absolute;
top: -1.5px;
left: 50%;
height: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
width: 50%;
}
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment