Skip to content

Commit

Permalink
Merge pull request #104 from Rucha-Ambaliya/feature/convert-styling-o…
Browse files Browse the repository at this point in the history
…f-Preloader.jsx

Feature/convert styling of preloader.jsx
  • Loading branch information
PratikMane0112 authored Jan 9, 2025
2 parents 3cea2ef + 2d51c54 commit fbd2f4b
Showing 4 changed files with 53 additions and 91 deletions.
48 changes: 30 additions & 18 deletions frontend/src/components/common/Preloader.jsx
Original file line number Diff line number Diff line change
@@ -3,23 +3,35 @@ import logo from "../../assets/header.png";

const Preloader = () => {
return (
<div id="preloader">
<div className="st-perloader">
<div className="st-perloader-in">
<div className="st-wave-second">
<svg enableBackground="new 0 0 300.08 300.08" viewBox="0 0 300.08 300.08" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m293.26 184.14h-82.877l-12.692-76.138c-.546-3.287-3.396-5.701-6.718-5.701-.034 0-.061 0-.089 0-3.369.027-6.199 2.523-6.677 5.845l-12.507 87.602-14.874-148.69c-.355-3.43-3.205-6.056-6.643-6.138-.048 0-.096 0-.143 0-3.39 0-6.274 2.489-6.752 5.852l-19.621 137.368h-9.405l-12.221-42.782c-.866-3.028-3.812-5.149-6.8-4.944-3.13.109-5.777 2.332-6.431 5.395l-8.941 42.332h-73.049c-3.771 0-6.82 3.049-6.82 6.82 0 3.778 3.049 6.82 6.82 6.82h78.566c3.219 0 6.002-2.251 6.67-5.408l4.406-20.856 6.09 21.313c.839 2.939 3.526 4.951 6.568 4.951h20.46c3.396 0 6.274-2.489 6.752-5.845l12.508-87.596 14.874 148.683c.355 3.437 3.205 6.056 6.643 6.138h.143c3.39 0 6.274-2.489 6.752-5.845l14.227-99.599 6.397 38.362c.546 3.287 3.396 5.702 6.725 5.702h88.66c3.771 0 6.82-3.049 6.82-6.82-.001-3.772-3.05-6.821-6.821-6.821z"></path>
</g>
</svg>
</div>
<div className="preloader-image">
<img src={logo} alt="TelMedSphere Logo" />
</div>
</div>
</div>
<div
id="preloader"
className="fixed top-0 left-0 w-full h-full z-[99999] bg-white-1 flex items-center justify-center"
>
<div className="relative text-center">
{/* Wave Animation */}
<div className="relative top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[110px] overflow-hidden animate-spark">
<svg
viewBox="0 0 300.08 300.08"
xmlns="http://www.w3.org/2000/svg"
className="w-[110px] h-[110px] fill-[#f00] max-sm:w-[90px] max-sm:h-[90px] "
>
<g>
<path d="m293.26 184.14h-82.877l-12.692-76.138c-.546-3.287-3.396-5.701-6.718-5.701-.034 0-.061 0-.089 0-3.369.027-6.199 2.523-6.677 5.845l-12.507 87.602-14.874-148.69c-.355-3.43-3.205-6.056-6.643-6.138-.048 0-.096 0-.143 0-3.39 0-6.274 2.489-6.752 5.852l-19.621 137.368h-9.405l-12.221-42.782c-.866-3.028-3.812-5.149-6.8-4.944-3.13.109-5.777 2.332-6.431 5.395l-8.941 42.332h-73.049c-3.771 0-6.82 3.049-6.82 6.82 0 3.778 3.049 6.82 6.82 6.82h78.566c3.219 0 6.002-2.251 6.67-5.408l4.406-20.856 6.09 21.313c.839 2.939 3.526 4.951 6.568 4.951h20.46c3.396 0 6.274-2.489 6.752-5.845l12.508-87.596 14.874 148.683c.355 3.437 3.205 6.056 6.643 6.138h.143c3.39 0 6.274-2.489 6.752-5.845l14.227-99.599 6.397 38.362c.546 3.287 3.396 5.702 6.725 5.702h88.66c3.771 0 6.82-3.049 6.82-6.82-.001-3.772-3.05-6.821-6.821-6.821z"></path>
</g>
</svg>
</div>

{/* Logo with Pulse Animation */}
<div className="">
<img
src={logo}
alt="TelMedSphere Logo"
className="h-[75px] max-sm:h-[57px] animate-pulse-custom object-contain transform transition-none duration-200 ease-in-out scale-100 hover:scale-110"
/>
</div>
</div>
</div>
);
};

export default Preloader;
};
export default Preloader;
72 changes: 0 additions & 72 deletions frontend/src/styles/components/_preloader.scss

This file was deleted.

1 change: 0 additions & 1 deletion frontend/src/styles/style.scss
Original file line number Diff line number Diff line change
@@ -10,7 +10,6 @@
@import "./components/form";
@import "./components/filterbar";
@import "./components/searchbar";
@import "./components/preloader";

// Pages
@import "./pages/home";
23 changes: 23 additions & 0 deletions frontend/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -72,6 +72,29 @@ module.exports = {
xs: "480px",
xxs: "400px",
},
animation: {
spark: "spark 1.5s linear infinite",
"pulse-custom": "pulse 2s infinite",
},
keyframes: {
spark: {
"0%": {
maxWidth: "0%",
},
"100%": {
maxWidth: "100%",
},
},
pulse: {
"0%, 100%": {
transform: "scale(1)",
},
"50%": {
transform: "scale(1.1)",
opacity: "1",
},
},
},
},
},
plugins: [],

0 comments on commit fbd2f4b

Please sign in to comment.