Skip to content

Commit df55450

Browse files
HananvcHananvc
committed
Loader update
1 parent d36c348 commit df55450

2 files changed

Lines changed: 132 additions & 16 deletions

File tree

‎src/Pages/admin/components/ImageEditModal.jsx‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
22
import axiosInstance from '../../../api/apiconfig';
33
import { toast } from 'react-toastify';
44
import Loader from '../../loader';
5+
import "./testing.css";
56

67
function ImageEditModal({ images, onClose, onImageEdit, fetchData, selectedVehicleId }) {
78
const [editedImages, setEditedImages] = useState([...images]);
@@ -106,22 +107,34 @@ function ImageEditModal({ images, onClose, onImageEdit, fetchData, selectedVehic
106107

107108
</div>
108109
<div className="flex justify-between mt-4">
109-
{loading ? <> <Loader/> </> : <> </>}
110-
<button
111-
type="submit"
112-
onClick={handleSaveImages}
113-
className="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-lg px-6 py-3 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
114-
>
115-
Upload Images
116-
</button>
117-
<button
118-
type="button"
119-
onClick={onClose}
120-
className="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-lg px-6 py-3 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
121-
>
122-
Cancel
123-
</button>
124-
</div>
110+
{loading ? (
111+
<div className="flex items-center mx-44">
112+
<div className="three-body">
113+
<div className="three-body__dot"></div>
114+
<div className="three-body__dot"></div>
115+
<div className="three-body__dot"></div>
116+
</div>
117+
</div>
118+
) : (
119+
<>
120+
<button
121+
type="submit"
122+
onClick={handleSaveImages}
123+
className="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-lg px-6 py-3 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
124+
>
125+
Upload Images
126+
</button>
127+
<button
128+
type="button"
129+
onClick={onClose}
130+
className="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-lg px-6 py-3 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
131+
>
132+
Cancel
133+
</button>
134+
</>
135+
)}
136+
</div>
137+
125138
</div>
126139
</div>
127140
);

‎src/Pages/admin/components/testing.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
.three-body {
2+
--uib-size: 35px;
3+
--uib-speed: 0.8s;
4+
--uib-color: #ea4335;
5+
position: relative;
6+
display: inline-block;
7+
height: var(--uib-size);
8+
width: var(--uib-size);
9+
animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
10+
}
11+
12+
.three-body__dot {
13+
position: absolute;
14+
height: 100%;
15+
width: 30%;
16+
}
17+
18+
.three-body__dot:after {
19+
content: '';
20+
position: absolute;
21+
height: 0%;
22+
width: 100%;
23+
padding-bottom: 100%;
24+
background-color: var(--uib-color);
25+
border-radius: 50%;
26+
}
27+
28+
.three-body__dot:nth-child(1) {
29+
bottom: 5%;
30+
left: 0;
31+
transform: rotate(60deg);
32+
transform-origin: 50% 85%;
33+
}
34+
35+
.three-body__dot:nth-child(1)::after {
36+
bottom: 0;
37+
left: 0;
38+
animation: wobble1 var(--uib-speed) infinite ease-in-out;
39+
animation-delay: calc(var(--uib-speed) * -0.3);
40+
}
41+
42+
.three-body__dot:nth-child(2) {
43+
bottom: 5%;
44+
right: 0;
45+
transform: rotate(-60deg);
46+
transform-origin: 50% 85%;
47+
}
48+
49+
.three-body__dot:nth-child(2)::after {
50+
bottom: 0;
51+
left: 0;
52+
animation: wobble1 var(--uib-speed) infinite
53+
calc(var(--uib-speed) * -0.15) ease-in-out;
54+
}
55+
56+
.three-body__dot:nth-child(3) {
57+
bottom: -5%;
58+
left: 0;
59+
transform: translateX(116.666%);
60+
}
61+
62+
.three-body__dot:nth-child(3)::after {
63+
top: 0;
64+
left: 0;
65+
animation: wobble2 var(--uib-speed) infinite ease-in-out;
66+
}
67+
68+
@keyframes spin78236 {
69+
0% {
70+
transform: rotate(0deg);
71+
}
72+
73+
100% {
74+
transform: rotate(360deg);
75+
}
76+
}
77+
78+
@keyframes wobble1 {
79+
0%,
80+
100% {
81+
transform: translateY(0%) scale(1);
82+
opacity: 1;
83+
}
84+
85+
50% {
86+
transform: translateY(-66%) scale(0.65);
87+
opacity: 0.8;
88+
}
89+
}
90+
91+
@keyframes wobble2 {
92+
0%,
93+
100% {
94+
transform: translateY(0%) scale(1);
95+
opacity: 1;
96+
}
97+
98+
50% {
99+
transform: translateY(66%) scale(0.65);
100+
opacity: 0.8;
101+
}
102+
}
103+

0 commit comments

Comments
 (0)