You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
524 lines
17 KiB
524 lines
17 KiB
5 years ago
|
<template>
|
||
|
<div class="we-no-result">
|
||
|
<div class="loading-container LTR">
|
||
|
<div class="📦"></div>
|
||
|
<div class="📦"></div>
|
||
|
<div class="📦"></div>
|
||
|
<div class="📦"></div>
|
||
|
<div class="📦"></div>
|
||
|
</div>
|
||
|
<div class="Fa"> {{ textFa }} </div>
|
||
|
<div class="En"> {{ textEn }} </div>
|
||
|
</div>
|
||
|
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
props: {
|
||
|
src: { default: '/images/Global/Animated/Loading.gif' },
|
||
|
textFa: { default: " درحال دریافت اطلاعات... لطفا شکیبا باشید " },
|
||
|
textEn: { default: " GATHERING DATA, PLEASE BE PATIENT " },
|
||
|
|
||
|
},
|
||
|
};
|
||
|
</script>
|
||
|
<style lang="scss">
|
||
|
:root {
|
||
|
--duration: 1.5s;
|
||
|
--container-size: 250px;
|
||
|
--box-size: 33px;
|
||
|
--box-border-radius: 15%;
|
||
|
--color-1: #D81B60;
|
||
|
--color-2: #C2185B;
|
||
|
--color-3: #AD1457;
|
||
|
--color-4: #880E4F;
|
||
|
}
|
||
|
|
||
|
|
||
|
.loading-container {
|
||
|
width: var(--container-size);
|
||
|
display: -webkit-box;
|
||
|
display: flex;
|
||
|
-webkit-box-pack: justify;
|
||
|
justify-content: space-between;
|
||
|
-webkit-box-align: center;
|
||
|
align-items: center;
|
||
|
position: relative;
|
||
|
margin: 0 auto;
|
||
|
padding-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
.📦 {
|
||
|
width: var(--box-size);
|
||
|
height: var(--box-size);
|
||
|
position: relative;
|
||
|
display: block;
|
||
|
-webkit-transform-origin: -50% center;
|
||
|
transform-origin: -50% center;
|
||
|
border-radius: var(--box-border-radius);
|
||
|
}
|
||
|
.📦:after {
|
||
|
content: '';
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
background-color: lightblue;
|
||
|
border-radius: var(--box-border-radius);
|
||
|
box-shadow: 0px 0px 10px 0px rgba(183, 100, 143, 0.4);
|
||
|
}
|
||
|
.📦:nth-child(1) {
|
||
|
-webkit-animation: slide var(--duration) ease-in-out infinite alternate;
|
||
|
animation: slide var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(1):after {
|
||
|
-webkit-animation: color-change var(--duration) ease-in-out infinite alternate;
|
||
|
animation: color-change var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(2) {
|
||
|
-webkit-animation: flip-1 var(--duration) ease-in-out infinite alternate;
|
||
|
animation: flip-1 var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(2):after {
|
||
|
-webkit-animation: squidge-1 var(--duration) ease-in-out infinite alternate;
|
||
|
animation: squidge-1 var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(3) {
|
||
|
-webkit-animation: flip-2 var(--duration) ease-in-out infinite alternate;
|
||
|
animation: flip-2 var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(3):after {
|
||
|
-webkit-animation: squidge-2 var(--duration) ease-in-out infinite alternate;
|
||
|
animation: squidge-2 var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(4) {
|
||
|
-webkit-animation: flip-3 var(--duration) ease-in-out infinite alternate;
|
||
|
animation: flip-3 var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(4):after {
|
||
|
-webkit-animation: squidge-3 var(--duration) ease-in-out infinite alternate;
|
||
|
animation: squidge-3 var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(5) {
|
||
|
-webkit-animation: flip-4 var(--duration) ease-in-out infinite alternate;
|
||
|
animation: flip-4 var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(5):after {
|
||
|
-webkit-animation: squidge-4 var(--duration) ease-in-out infinite alternate;
|
||
|
animation: squidge-4 var(--duration) ease-in-out infinite alternate;
|
||
|
}
|
||
|
.📦:nth-child(2):after {
|
||
|
background-color: var(--color-1);
|
||
|
}
|
||
|
.📦:nth-child(3):after {
|
||
|
background-color: var(--color-2);
|
||
|
}
|
||
|
.📦:nth-child(4):after {
|
||
|
background-color: var(--color-3);
|
||
|
}
|
||
|
.📦:nth-child(5):after {
|
||
|
background-color: var(--color-4);
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes slide {
|
||
|
0% {
|
||
|
background-color: var(--color-1);
|
||
|
-webkit-transform: translatex(0vw);
|
||
|
transform: translatex(0vw);
|
||
|
}
|
||
|
100% {
|
||
|
background-color: var(--color-2);
|
||
|
-webkit-transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25)));
|
||
|
transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25)));
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes slide {
|
||
|
0% {
|
||
|
background-color: var(--color-1);
|
||
|
-webkit-transform: translatex(0vw);
|
||
|
transform: translatex(0vw);
|
||
|
}
|
||
|
100% {
|
||
|
background-color: var(--color-2);
|
||
|
-webkit-transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25)));
|
||
|
transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25)));
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes color-change {
|
||
|
0% {
|
||
|
background-color: var(--color-1);
|
||
|
}
|
||
|
100% {
|
||
|
background-color: var(--color-2);
|
||
|
}
|
||
|
}
|
||
|
@keyframes color-change {
|
||
|
0% {
|
||
|
background-color: var(--color-1);
|
||
|
}
|
||
|
100% {
|
||
|
background-color: var(--color-2);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes flip-1 {
|
||
|
0%, 15% {
|
||
|
-webkit-transform: rotate(0);
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
35%, 100% {
|
||
|
-webkit-transform: rotate(-180deg);
|
||
|
transform: rotate(-180deg);
|
||
|
}
|
||
|
}
|
||
|
@keyframes flip-1 {
|
||
|
0%, 15% {
|
||
|
-webkit-transform: rotate(0);
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
35%, 100% {
|
||
|
-webkit-transform: rotate(-180deg);
|
||
|
transform: rotate(-180deg);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes squidge-1 {
|
||
|
5% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
15% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
25%, 20% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(0.8) scaley(1.4);
|
||
|
transform: scalex(0.8) scaley(1.4);
|
||
|
}
|
||
|
55%, 100% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
40% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
}
|
||
|
@keyframes squidge-1 {
|
||
|
5% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
15% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
25%, 20% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(0.8) scaley(1.4);
|
||
|
transform: scalex(0.8) scaley(1.4);
|
||
|
}
|
||
|
55%, 100% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
40% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes flip-2 {
|
||
|
0%, 30% {
|
||
|
-webkit-transform: rotate(0);
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
50%, 100% {
|
||
|
-webkit-transform: rotate(-180deg);
|
||
|
transform: rotate(-180deg);
|
||
|
}
|
||
|
}
|
||
|
@keyframes flip-2 {
|
||
|
0%, 30% {
|
||
|
-webkit-transform: rotate(0);
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
50%, 100% {
|
||
|
-webkit-transform: rotate(-180deg);
|
||
|
transform: rotate(-180deg);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes squidge-2 {
|
||
|
20% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
30% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
40%, 35% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(0.8) scaley(1.4);
|
||
|
transform: scalex(0.8) scaley(1.4);
|
||
|
}
|
||
|
70%, 100% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
55% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
}
|
||
|
@keyframes squidge-2 {
|
||
|
20% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
30% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
40%, 35% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(0.8) scaley(1.4);
|
||
|
transform: scalex(0.8) scaley(1.4);
|
||
|
}
|
||
|
70%, 100% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
55% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes flip-3 {
|
||
|
0%, 45% {
|
||
|
-webkit-transform: rotate(0);
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
65%, 100% {
|
||
|
-webkit-transform: rotate(-180deg);
|
||
|
transform: rotate(-180deg);
|
||
|
}
|
||
|
}
|
||
|
@keyframes flip-3 {
|
||
|
0%, 45% {
|
||
|
-webkit-transform: rotate(0);
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
65%, 100% {
|
||
|
-webkit-transform: rotate(-180deg);
|
||
|
transform: rotate(-180deg);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes squidge-3 {
|
||
|
35% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
45% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
55%, 50% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(0.8) scaley(1.4);
|
||
|
transform: scalex(0.8) scaley(1.4);
|
||
|
}
|
||
|
85%, 100% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
70% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
}
|
||
|
@keyframes squidge-3 {
|
||
|
35% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
45% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
55%, 50% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(0.8) scaley(1.4);
|
||
|
transform: scalex(0.8) scaley(1.4);
|
||
|
}
|
||
|
85%, 100% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
70% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes flip-4 {
|
||
|
0%, 60% {
|
||
|
-webkit-transform: rotate(0);
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
80%, 100% {
|
||
|
-webkit-transform: rotate(-180deg);
|
||
|
transform: rotate(-180deg);
|
||
|
}
|
||
|
}
|
||
|
@keyframes flip-4 {
|
||
|
0%, 60% {
|
||
|
-webkit-transform: rotate(0);
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
80%, 100% {
|
||
|
-webkit-transform: rotate(-180deg);
|
||
|
transform: rotate(-180deg);
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes squidge-4 {
|
||
|
50% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
60% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
70%, 65% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(0.8) scaley(1.4);
|
||
|
transform: scalex(0.8) scaley(1.4);
|
||
|
}
|
||
|
100%, 100% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
85% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
}
|
||
|
@keyframes squidge-4 {
|
||
|
50% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
60% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
70%, 65% {
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
-webkit-transform: scalex(0.8) scaley(1.4);
|
||
|
transform: scalex(0.8) scaley(1.4);
|
||
|
}
|
||
|
100%, 100% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1) scaley(1);
|
||
|
transform: scalex(1) scaley(1);
|
||
|
}
|
||
|
85% {
|
||
|
-webkit-transform-origin: center top;
|
||
|
transform-origin: center top;
|
||
|
-webkit-transform: scalex(1.3) scaley(0.7);
|
||
|
transform: scalex(1.3) scaley(0.7);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
.we-no-result {
|
||
|
text-align: center;
|
||
|
padding: 10px;
|
||
|
width: 100%;
|
||
|
}
|
||
|
.we-no-result img {
|
||
|
width: 300px;
|
||
|
border-radius: 150px;
|
||
|
}
|
||
|
.we-no-result .Fa {
|
||
|
font-size: 18px;
|
||
|
}
|
||
|
|
||
|
.we-no-result .En {
|
||
|
direction: ltr;
|
||
|
font-size: 12px;
|
||
|
letter-spacing: 5px;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
</style>
|