loading and catalog card
This commit is contained in:
nabijonovdavronbek619@gmail.com
117
components/initialLoading/initialLoading.css
Normal file
117
components/initialLoading/initialLoading.css
Normal file
@@ -0,0 +1,117 @@
|
||||
.initial-loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #0c0c0c 0%, #151313 100%);
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.6s ease-out;
|
||||
}
|
||||
|
||||
.initial-loading.fade-out {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.initial-loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.initial-svg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
animation: initialFloat 2s ease-in-out infinite, initialScale 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.initial-path {
|
||||
fill: url(#initial-gradient);
|
||||
filter: url(#initial-glow);
|
||||
stroke: #ffffff;
|
||||
stroke-width: 2;
|
||||
animation: pathPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Loading dots animation */
|
||||
.initial-loading-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-dots span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ff0000;
|
||||
border-radius: 50%;
|
||||
animation: dotBounce 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-dots span:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.loading-dots span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.loading-dots span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes initialFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes initialScale {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pathPulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
stroke-width: 2;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotBounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth scroll prevention */
|
||||
body:has(.initial-loading:not(.fade-out)) {
|
||||
overflow: hidden;
|
||||
}
|
||||
106
components/initialLoading/initialLoading.tsx
Normal file
106
components/initialLoading/initialLoading.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import "./initialLoading.css";
|
||||
|
||||
export function InitialLoading() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Faqat birinchi yuklanishda ishga tushadi
|
||||
const hasVisited = sessionStorage.getItem("hasVisited");
|
||||
|
||||
if (hasVisited) {
|
||||
// Agar oldin tashrif buyurilgan bo'lsa, darhol yashirish
|
||||
setIsLoading(false);
|
||||
setIsVisible(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Birinchi tashrif
|
||||
const loadingTimer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
|
||||
// Fade out animatsiyasi
|
||||
const hideTimer = setTimeout(() => {
|
||||
setIsVisible(false);
|
||||
sessionStorage.setItem("hasVisited", "true");
|
||||
}, 1000); // Fade out duration
|
||||
|
||||
return () => clearTimeout(hideTimer);
|
||||
}, 1500); // Loading duration
|
||||
|
||||
return () => clearTimeout(loadingTimer);
|
||||
}, []);
|
||||
|
||||
// Agar ko'rinmas bo'lsa, hech narsa render qilmaymiz
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<div className={`initial-loading ${!isLoading ? "fade-out" : ""}`}>
|
||||
<div className="initial-loading-content">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 423.22 424.82"
|
||||
className="w-full h-full"
|
||||
>
|
||||
<defs>
|
||||
{/* Qizil neon gradient for github*/}
|
||||
<linearGradient id="neon-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#979797" />
|
||||
<stop offset="50%" stopColor="#e4e4e4" />
|
||||
<stop offset="100%" stopColor="#9a9a9a" />
|
||||
</linearGradient>
|
||||
|
||||
{/* Neon glow filter */}
|
||||
<filter id="neon-glow">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g>
|
||||
<polygon
|
||||
className="logo-path"
|
||||
points="352.86 365.08 347.11 365.08 347.11 381 289.38 381 289.38 365.08 283.63 365.08 283.63 381 204.78 381 204.78 365.08 199.03 365.08 199.03 381 141.32 381 141.32 365.08 135.57 365.08 135.57 381 77.87 381 77.87 365.08 71.86 365.08 71.85 381 17.21 381 17.21 386.74 72.11 386.74 72.11 424.82 74.04 424.82 74.04 386.74 350.94 386.74 350.94 424.82 352.86 424.82 352.86 386.74 406.02 386.74 406.02 381 352.86 381 352.86 365.08"
|
||||
/>
|
||||
<path
|
||||
className="logo-path"
|
||||
d="m72.11,157.74v73.55l-41.42,23.89h3.83l37.58-21.68-.04,21.68h5.79v-24.99l57.7-33.27v58.26h5.75v-57.15l57.71-33.29v90.44h5.75v-90.43l39.43,22.77,39.43,22.77v44.89h5.74v-41.58l57.73,33.32v8.25h5.75v-95.41h-1.92v82.75l-61.56-35.55v-98.77l59.59-34.35-.97-1.66-58.62,33.81V0h-1.92v42.86h-88.43v115.23l-5.2,3-14.21,8.16-27.25,15.74-11.05,6.37v-73.53l36.14-20.85-.96-1.66-35.19,20.29v-35.03h-1.92v36.13l-65.36,37.7v-37.25h-1.92v38.35l-53.08,30.6.96,1.67,52.12-30.07ZM204.78,48.58h78.85v60.71l-78.85,45.48V48.58Zm0,108.41l78.85-45.49v92.14l-78.85-45.54v-1.11Zm-126.91,1.92l57.7-33.32v69.11l-57.7,33.26v-69.05Z"
|
||||
/>
|
||||
<g>
|
||||
<rect className="logo-path" y="277.99" width="12.06" height="64.23" />
|
||||
<path
|
||||
className="logo-path"
|
||||
d="m88.82,342.36c3.93-.65,7.51-1.73,10.75-3.23,3.24-1.5,6.01-3.46,8.32-5.89l1.31,8.97h7.76v-35.25h-39.45v9.72h27.58v1.03c0,3.12-.94,5.84-2.8,8.18-1.87,2.34-4.81,4.13-8.83,5.38-4.02,1.25-9.3,1.87-15.85,1.87-5.49,0-10.28-.73-14.4-2.2-4.11-1.46-7.32-3.8-9.63-7.01-2.31-3.21-3.46-7.46-3.46-12.76v-2.24c0-3.93.75-7.28,2.24-10.05,1.5-2.77,3.58-5.03,6.26-6.78,2.68-1.74,5.8-3.02,9.35-3.83,3.55-.81,7.39-1.21,11.5-1.21,3.37,0,6.56.2,9.58.61,3.02.41,5.75,1.11,8.18,2.1,2.43,1,4.35,2.38,5.75,4.16,1.4,1.78,2.1,3.97,2.1,6.59h11.78c0-4.05-.89-7.56-2.66-10.52-1.78-2.96-4.33-5.41-7.67-7.34-3.33-1.93-7.32-3.38-11.97-4.35-4.64-.97-9.83-1.45-15.57-1.45-8.6,0-15.99,1.25-22.16,3.74-6.17,2.49-10.89,6.22-14.16,11.17-3.27,4.95-4.91,11.08-4.91,18.37,0,11.16,3.23,19.48,9.68,24.96,6.45,5.49,16.16,8.23,29.12,8.23,4.24,0,8.32-.33,12.25-.98Z"
|
||||
/>
|
||||
<path
|
||||
className="logo-path"
|
||||
d="m160.8,299.31c1.68,1.81,3.3,3.49,4.86,5.05l37.96,37.86h11.12v-64.23h-11.59v37.02c0,1.31.03,2.9.09,4.77.06,1.87.12,3.43.19,4.68h-.75c-.75-.87-1.67-1.87-2.76-2.99-1.09-1.12-2.15-2.23-3.18-3.32-1.03-1.09-1.92-1.98-2.66-2.66l-37.86-37.49h-11.5v64.23h11.59v-36.37c0-2.31-.02-4.46-.05-6.45-.03-1.99-.08-3.46-.14-4.39h.65c1,1.06,2.34,2.49,4.02,4.3Z"
|
||||
/>
|
||||
<path
|
||||
className="logo-path"
|
||||
d="m242.6,277.99v35.34c0,6.11,1.26,11.42,3.79,15.94,2.52,4.52,6.36,7.99,11.5,10.42,5.14,2.43,11.64,3.65,19.49,3.65s14.33-1.21,19.45-3.65c5.11-2.43,8.93-5.9,11.45-10.42,2.52-4.52,3.79-9.83,3.79-15.94v-35.34h-12.06v34.97c0,6.48-1.96,11.47-5.89,14.96-3.93,3.49-9.5,5.23-16.73,5.23s-12.89-1.74-16.78-5.23c-3.9-3.49-5.84-8.48-5.84-14.96v-34.97h-12.15Z"
|
||||
/>
|
||||
<path
|
||||
className="logo-path"
|
||||
d="m404.99,277.99l-17.2,37.02c-.5,1.12-1.11,2.51-1.82,4.16-.72,1.65-1.42,3.32-2.1,5-.69,1.68-1.31,3.18-1.87,4.49h-.56c-.62-1.5-1.3-3.12-2.01-4.86-.72-1.74-1.42-3.44-2.1-5.1-.69-1.65-1.25-2.94-1.68-3.88l-17.2-36.83h-18.51v64.23h11.59v-40.29c0-1.31-.02-2.67-.05-4.07-.03-1.4-.06-2.76-.09-4.07-.03-1.31-.08-2.4-.14-3.27h.75c.31.81.67,1.79,1.07,2.94.4,1.15.89,2.37,1.45,3.65.56,1.28,1.12,2.51,1.68,3.69l19.26,41.42h11.87l19.17-41.42c.43-.94.92-2.02,1.45-3.27.53-1.25,1.04-2.49,1.54-3.74.5-1.25.9-2.34,1.22-3.27h.75c-.06,1-.13,2.18-.19,3.55-.06,1.37-.11,2.74-.14,4.11-.03,1.37-.05,2.62-.05,3.74v40.29h12.15v-64.23h-18.23Z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Loading dots */}
|
||||
<div className="initial-loading-text">
|
||||
<div className="loading-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user