Implement loading spinner and Polish translations: add Spinner component for loading states in Search and SearchList, update UI text to Polish for improved localization, and enhance Pagination styles for better visibility.
This commit is contained in:
5
src/components/atoms/Spinner/index.tsx
Normal file
5
src/components/atoms/Spinner/index.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
export const Spinner = () => {
|
||||
return <span className={styles.loader} />;
|
||||
};
|
||||
32
src/components/atoms/Spinner/styles.module.css
Normal file
32
src/components/atoms/Spinner/styles.module.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
.loader::after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 10px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: #ff3d00;
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
box-shadow: 25px 2px, 10px 22px;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user