alireza_hassani
/
willaengine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b2658142ae'
${ noResults }
willaengine/resources/js/Global/components/Misc/Loading-CSS.vue

524 lines
17 KiB
Raw Blame History

<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>
Reference in new issue View Git Blame Copy Permalink