Skip to content

Commit 92d722e

Browse files
ArielMAJArielMAJ
authored
Merge pull request #64 from ArielMAJ/feat/#43/loading-files
[ADD][#43] Added example loading files.
2 parents 6ac9048 + 343891e commit 92d722e

10 files changed

Lines changed: 324 additions & 10 deletions

File tree

‎api/poetry.lock‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎api/pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[tool.poetry]
22
name = "fastapi-backend-template"
3-
version = "0.2.1"
3+
version = "0.3.0"
44
description = "A FastAPI backend template."
55
authors = ["ArielMAJ <ariel.maj@hotmail.com>"]
66
readme = "README.md"

‎vue-front/components.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,15 @@ export {}
77

88
declare module "vue" {
99
export interface GlobalComponents {
10+
copy: typeof import("./src/components/loaders/Roller copy.vue")["default"];
11+
Dots: typeof import("./src/components/loaders/Dots.vue")["default"];
12+
Dots2: typeof import("./src/components/loaders/Dots2.vue")["default"];
13+
DualRing: typeof import("./src/components/loaders/DualRing.vue")["default"];
14+
Ellipsis: typeof import("./src/components/loaders/Ellipsis.vue")["default"];
15+
Ellipsis2: typeof import("./src/components/loaders/Ellipsis2.vue")["default"];
1016
HelloWorld: typeof import("./src/components/HelloWorld.vue")["default"];
17+
Ring: typeof import("./src/components/loaders/Ring.vue")["default"];
18+
Roller: typeof import("./src/components/loaders/Roller.vue")["default"];
1119
RouterLink: typeof import("vue-router")["RouterLink"];
1220
RouterView: typeof import("vue-router")["RouterView"];
1321
}

‎vue-front/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "vuetify-project",
3-
"version": "0.0.0",
2+
"name": "vuetify-frontend-template",
3+
"version": "0.3.0",
44
"scripts": {
55
"dev": "cross-env NODE_OPTIONS='--no-warnings' vite",
66
"build": "vite build",

‎vue-front/src/components/HelloWorld.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div id="content">
3-
<p v-if="loadingMessage">Loading message...</p>
3+
<Ellipsis2 v-if="loadingMessage" />
44
<p v-else>{{ message }}</p>
5-
<p v-if="loadingRandomNumber">Loading random number...</p>
5+
<Ellipsis v-if="loadingRandomNumber" />
66
<p v-else>Random Number: {{ formattedRandomNumber }}</p>
77
<button
88
@click="fetchRandomNumber"
@@ -16,9 +16,15 @@
1616

1717
<script lang="ts">
1818
import { defineComponent } from "vue";
19+
import Ellipsis from "@/components/loaders/Ellipsis.vue";
20+
import Ellipsis2 from "@/components/loaders/Ellipsis2.vue";
1921
2022
export default defineComponent({
2123
name: "HelloWorld",
24+
components: {
25+
Ellipsis,
26+
Ellipsis2,
27+
},
2228
data() {
2329
return {
2430
message: "",

‎vue-front/src/components/loaders/DualRing.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div class="lds-dual-ring"></div>
3+
</template>
4+
5+
<script lang="ts" setup></script>
6+
7+
<style scoped>
8+
.lds-dual-ring {
9+
display: inline-block;
10+
width: 80px;
11+
height: 80px;
12+
}
13+
.lds-dual-ring:after {
14+
content: " ";
15+
display: block;
16+
width: 64px;
17+
height: 64px;
18+
margin: 8px;
19+
border-radius: 50%;
20+
border: 6px solid #cef;
21+
border-color: #cef transparent #cef transparent;
22+
animation: lds-dual-ring 1.2s linear infinite;
23+
}
24+
@keyframes lds-dual-ring {
25+
0% {
26+
transform: rotate(0deg);
27+
}
28+
100% {
29+
transform: rotate(360deg);
30+
}
31+
}
32+
</style>

‎vue-front/src/components/loaders/Ellipsis.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div class="lds-ellipsis">
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
</div>
8+
</template>
9+
10+
<script lang="ts" setup></script>
11+
12+
<style scoped>
13+
.lds-ellipsis {
14+
display: inline-block;
15+
position: relative;
16+
width: 80px;
17+
height: 24px;
18+
}
19+
.lds-ellipsis div {
20+
position: absolute;
21+
top: 5px;
22+
width: 13px;
23+
height: 13px;
24+
border-radius: 50%;
25+
background: #cef;
26+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
27+
}
28+
.lds-ellipsis div:nth-child(1) {
29+
left: 8px;
30+
animation: lds-ellipsis1 0.6s infinite;
31+
}
32+
.lds-ellipsis div:nth-child(2) {
33+
left: 8px;
34+
animation: lds-ellipsis2 0.6s infinite;
35+
}
36+
.lds-ellipsis div:nth-child(3) {
37+
left: 32px;
38+
animation: lds-ellipsis2 0.6s infinite;
39+
}
40+
.lds-ellipsis div:nth-child(4) {
41+
left: 56px;
42+
animation: lds-ellipsis3 0.6s infinite;
43+
}
44+
@keyframes lds-ellipsis1 {
45+
0% {
46+
transform: scale(0);
47+
}
48+
100% {
49+
transform: scale(1);
50+
}
51+
}
52+
@keyframes lds-ellipsis3 {
53+
0% {
54+
transform: scale(1);
55+
}
56+
100% {
57+
transform: scale(0);
58+
}
59+
}
60+
@keyframes lds-ellipsis2 {
61+
0% {
62+
transform: translate(0, 0);
63+
}
64+
100% {
65+
transform: translate(24px, 0);
66+
}
67+
}
68+
</style>

‎vue-front/src/components/loaders/Ellipsis2.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<span class="loader"></span>
3+
</template>
4+
5+
<script lang="ts" setup></script>
6+
7+
<style scoped>
8+
.loader,
9+
.loader:before,
10+
.loader:after {
11+
border-radius: 50%;
12+
width: 2.5em;
13+
height: 2.5em;
14+
animation-fill-mode: both;
15+
animation: bblFadInOut 1.8s infinite ease-in-out;
16+
}
17+
.loader {
18+
margin-bottom: 21px;
19+
margin-top: -15px;
20+
color: #cceeff;
21+
font-size: 7px;
22+
position: relative;
23+
text-indent: -9999em;
24+
transform: translateZ(0);
25+
animation-delay: -0.16s;
26+
}
27+
.loader:before,
28+
.loader:after {
29+
content: "";
30+
position: absolute;
31+
top: 0;
32+
}
33+
.loader:before {
34+
left: -3.5em;
35+
animation-delay: -0.32s;
36+
}
37+
.loader:after {
38+
left: 3.5em;
39+
}
40+
41+
@keyframes bblFadInOut {
42+
0%,
43+
80%,
44+
100% {
45+
box-shadow: 0 2.5em 0 -1.3em;
46+
}
47+
40% {
48+
box-shadow: 0 2.5em 0 0;
49+
}
50+
}
51+
</style>

‎vue-front/src/components/loaders/Ring.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div class="lds-ring">
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
</div>
8+
</template>
9+
10+
<script lang="ts" setup></script>
11+
12+
<style scoped>
13+
.lds-ring {
14+
display: inline-block;
15+
position: relative;
16+
width: 80px;
17+
height: 80px;
18+
}
19+
.lds-ring div {
20+
box-sizing: border-box;
21+
display: block;
22+
position: absolute;
23+
width: 64px;
24+
height: 64px;
25+
margin: 8px;
26+
border: 8px solid #cef;
27+
border-radius: 50%;
28+
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
29+
border-color: #cef transparent transparent transparent;
30+
}
31+
.lds-ring div:nth-child(1) {
32+
animation-delay: -0.45s;
33+
}
34+
.lds-ring div:nth-child(2) {
35+
animation-delay: -0.3s;
36+
}
37+
.lds-ring div:nth-child(3) {
38+
animation-delay: -0.15s;
39+
}
40+
@keyframes lds-ring {
41+
0% {
42+
transform: rotate(0deg);
43+
}
44+
100% {
45+
transform: rotate(360deg);
46+
}
47+
}
48+
</style>

‎vue-front/src/components/loaders/Roller.vue‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<template>
2+
<div class="lds-roller">
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
<div></div>
8+
<div></div>
9+
<div></div>
10+
<div></div>
11+
</div>
12+
</template>
13+
14+
<script lang="ts" setup></script>
15+
16+
<style scoped>
17+
.lds-roller {
18+
display: inline-block;
19+
position: relative;
20+
width: 80px;
21+
height: 80px;
22+
}
23+
.lds-roller div {
24+
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
25+
transform-origin: 40px 40px;
26+
}
27+
.lds-roller div:after {
28+
content: " ";
29+
display: block;
30+
position: absolute;
31+
width: 7px;
32+
height: 7px;
33+
border-radius: 50%;
34+
background: #cef;
35+
margin: -4px 0 0 -4px;
36+
}
37+
.lds-roller div:nth-child(1) {
38+
animation-delay: -0.036s;
39+
}
40+
.lds-roller div:nth-child(1):after {
41+
top: 63px;
42+
left: 63px;
43+
}
44+
.lds-roller div:nth-child(2) {
45+
animation-delay: -0.072s;
46+
}
47+
.lds-roller div:nth-child(2):after {
48+
top: 68px;
49+
left: 56px;
50+
}
51+
.lds-roller div:nth-child(3) {
52+
animation-delay: -0.108s;
53+
}
54+
.lds-roller div:nth-child(3):after {
55+
top: 71px;
56+
left: 48px;
57+
}
58+
.lds-roller div:nth-child(4) {
59+
animation-delay: -0.144s;
60+
}
61+
.lds-roller div:nth-child(4):after {
62+
top: 72px;
63+
left: 40px;
64+
}
65+
.lds-roller div:nth-child(5) {
66+
animation-delay: -0.18s;
67+
}
68+
.lds-roller div:nth-child(5):after {
69+
top: 71px;
70+
left: 32px;
71+
}
72+
.lds-roller div:nth-child(6) {
73+
animation-delay: -0.216s;
74+
}
75+
.lds-roller div:nth-child(6):after {
76+
top: 68px;
77+
left: 24px;
78+
}
79+
.lds-roller div:nth-child(7) {
80+
animation-delay: -0.252s;
81+
}
82+
.lds-roller div:nth-child(7):after {
83+
top: 63px;
84+
left: 17px;
85+
}
86+
.lds-roller div:nth-child(8) {
87+
animation-delay: -0.288s;
88+
}
89+
.lds-roller div:nth-child(8):after {
90+
top: 56px;
91+
left: 12px;
92+
}
93+
@keyframes lds-roller {
94+
0% {
95+
transform: rotate(0deg);
96+
}
97+
100% {
98+
transform: rotate(360deg);
99+
}
100+
}
101+
</style>

0 commit comments

Comments
 (0)