Skip to content

Commit

Permalink
Refactor Loader components for improved styling, animation, and acces…
Browse files Browse the repository at this point in the history 
…sibility
  • Loading branch information
@abhaysinghr516
abhaysinghr516 committed Dec 2, 2024
1 parent 1d6ebc5 commit 00ce33a
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 42 deletions.
37 changes: 19 additions & 18 deletions src/app/contents/docs/components/loader/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ description: Loaders are a great way to show users that something is happening i
function SpinnerLoader() {
return (
<div
className="w-8 h-8 border-4 border-blue-500 rounded-full"
className="w-8 h-8 border-4 border-[rgba(0, 0, 0, 0.08)] rounded-full"
style={{
borderRightColor: "transparent",
animation: "spin 1s linear infinite",
animation: "spin 0.8s cubic-bezier(0.42, 0, 0.58, 1) infinite",
}}
role="status"
>
Expand Down Expand Up @@ -44,7 +44,7 @@ function PulseLoader() {
{[0, 1, 2].map((index) => (
<div
key={index}
className="w-2 h-8 bg-blue-500 rounded-full"
className="w-1.5 h-6 bg-black rounded-full opacity-30"
style={{
animation: "pulse 1.4s ease-in-out infinite",
animationDelay: `${index * 0.2}s`,
Expand All @@ -66,18 +66,17 @@ function PulseLoader() {
</div>
);
}

```

#### Dots Loader
```jsx showLineNumbers
function DotsLoader() {
return (
<div className="flex space-x-1" role="status">
<div className="flex space-x-1.5" role="status">
{[0, 1, 2].map((index) => (
<div
key={index}
className="w-2 h-2 bg-blue-500 rounded-full"
className="w-2 h-2 bg-black rounded-full opacity-30"
style={{
animation: "bounce 1.4s infinite ease-in-out",
animationDelay: `${index * 0.16}s`,
Expand Down Expand Up @@ -106,9 +105,9 @@ function DotsLoader() {
function CircleLoader() {
return (
<div
className="w-8 h-8 border-2 border-gray-200 rounded-full"
className="w-8 h-8 rounded-full"
style={{
borderTopColor: "#3B82F6",
background: "conic-gradient(from 0deg, #000, rgba(0, 0, 0, 0.08))",
animation: "spin 1s linear infinite",
}}
role="status"
Expand All @@ -134,14 +133,14 @@ function CircleLoader() {
function BarLoader() {
return (
<div
className="w-16 h-2 bg-gray-200 rounded-full overflow-hidden"
className="w-16 h-1 bg-black/[0.08] rounded-full overflow-hidden"
role="status"
>
<div
className="h-full bg-blue-500"
className="h-full bg-black"
style={{
width: "30%",
animation: "slide 1s ease-in-out infinite",
width: "25%",
animation: "slide 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
}}
></div>
<span className="sr-only">Loading...</span>
Expand All @@ -165,9 +164,10 @@ function BarLoader() {
function SquareLoader() {
return (
<div
className="w-8 h-8 bg-blue-500"
className="w-6 h-6 bg-black/30"
style={{
animation: "rotate 1.5s ease-in-out infinite",
animation:
"rotate 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite",
}}
role="status"
>
Expand Down Expand Up @@ -195,9 +195,10 @@ function SquareLoader() {
function HourglassLoader() {
return (
<div
className="w-8 h-8 border-4 border-blue-500 rounded-full"
className="w-6 h-6 border-4 border-black/30 rounded-lg"
style={{
animation: "hourglass 1.5s ease-in-out infinite",
animation:
"hourglass 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite",
}}
role="status"
>
Expand All @@ -210,15 +211,15 @@ function HourglassLoader() {
}
25% {
transform: rotate(180deg);
border-radius: 0%;
border-radius: 4px;
}
50% {
transform: rotate(180deg);
border-radius: 50%;
}
75% {
transform: rotate(360deg);
border-radius: 0%;
border-radius: 4px;
}
100% {
transform: rotate(360deg);
Expand Down
50 changes: 26 additions & 24 deletions src/components/Loader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,42 @@ export const Loaders: React.FC = () => (
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 p-8">
<div className="flex flex-col items-center">
<SpinnerLoader />
<span className="mt-2 text-sm text-gray-600">Spinner</span>
<span className="mt-2 text-sm text-gray-500 font-medium">Spinner</span>
</div>
<div className="flex flex-col items-center">
<PulseLoader />
<span className="mt-2 text-sm text-gray-600">Pulse</span>
<span className="mt-2 text-sm text-gray-500 font-medium">Pulse</span>
</div>
<div className="flex flex-col items-center">
<DotsLoader />
<span className="mt-2 text-sm text-gray-600">Dots</span>
<span className="mt-2 text-sm text-gray-500 font-medium">Dots</span>
</div>
<div className="flex flex-col items-center">
<CircleLoader />
<span className="mt-2 text-sm text-gray-600">Circle</span>
<span className="mt-2 text-sm text-gray-500 font-medium">Circle</span>
</div>
<div className="flex flex-col items-center">
<BarLoader />
<span className="mt-2 text-sm text-gray-600">Bar</span>
<span className="mt-2 text-sm text-gray-500 font-medium">Bar</span>
</div>
<div className="flex flex-col items-center">
<SquareLoader />
<span className="mt-2 text-sm text-gray-600">Square</span>
<span className="mt-2 text-sm text-gray-500 font-medium">Square</span>
</div>
<div className="flex flex-col items-center">
<HourglassLoader />
<span className="mt-2 text-sm text-gray-600">Hourglass</span>
<span className="mt-2 text-sm text-gray-500 font-medium">Hourglass</span>
</div>
</div>
);

function SpinnerLoader() {
return (
<div
className="w-8 h-8 border-4 border-blue-500 rounded-full"
className="w-8 h-8 border-4 border-[rgba(0, 0, 0, 0.08)] rounded-full"
style={{
borderRightColor: "transparent",
animation: "spin 1s linear infinite",
animation: "spin 0.8s cubic-bezier(0.42, 0, 0.58, 1) infinite",
}}
role="status"
>
Expand All @@ -64,7 +64,7 @@ function PulseLoader() {
{[0, 1, 2].map((index) => (
<div
key={index}
className="w-2 h-8 bg-blue-500 rounded-full"
className="w-1.5 h-6 bg-black rounded-full opacity-30"
style={{
animation: "pulse 1.4s ease-in-out infinite",
animationDelay: `${index * 0.2}s`,
Expand All @@ -89,11 +89,11 @@ function PulseLoader() {

function DotsLoader() {
return (
<div className="flex space-x-1" role="status">
<div className="flex space-x-1.5" role="status">
{[0, 1, 2].map((index) => (
<div
key={index}
className="w-2 h-2 bg-blue-500 rounded-full"
className="w-2 h-2 bg-black rounded-full opacity-30"
style={{
animation: "bounce 1.4s infinite ease-in-out",
animationDelay: `${index * 0.16}s`,
Expand All @@ -119,9 +119,9 @@ function DotsLoader() {
function CircleLoader() {
return (
<div
className="w-8 h-8 border-2 border-gray-200 rounded-full"
className="w-8 h-8 rounded-full"
style={{
borderTopColor: "#3B82F6",
background: "conic-gradient(from 0deg, #000, rgba(0, 0, 0, 0.08))",
animation: "spin 1s linear infinite",
}}
role="status"
Expand All @@ -144,14 +144,14 @@ function CircleLoader() {
function BarLoader() {
return (
<div
className="w-16 h-2 bg-gray-200 rounded-full overflow-hidden"
className="w-16 h-1 bg-black/[0.08] rounded-full overflow-hidden"
role="status"
>
<div
className="h-full bg-blue-500"
className="h-full bg-black"
style={{
width: "30%",
animation: "slide 1s ease-in-out infinite",
width: "25%",
animation: "slide 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
}}
></div>
<span className="sr-only">Loading...</span>
Expand All @@ -172,9 +172,10 @@ function BarLoader() {
function SquareLoader() {
return (
<div
className="w-8 h-8 bg-blue-500"
className="w-6 h-6 bg-black/30"
style={{
animation: "rotate 1.5s ease-in-out infinite",
animation:
"rotate 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite",
}}
role="status"
>
Expand All @@ -199,9 +200,10 @@ function SquareLoader() {
function HourglassLoader() {
return (
<div
className="w-8 h-8 border-4 border-blue-500 rounded-full"
className="w-6 h-6 border-4 border-black/30 rounded-lg"
style={{
animation: "hourglass 1.5s ease-in-out infinite",
animation:
"hourglass 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite",
}}
role="status"
>
Expand All @@ -214,15 +216,15 @@ function HourglassLoader() {
}
25% {
transform: rotate(180deg);
border-radius: 0%;
border-radius: 4px;
}
50% {
transform: rotate(180deg);
border-radius: 50%;
}
75% {
transform: rotate(360deg);
border-radius: 0%;
border-radius: 4px;
}
100% {
transform: rotate(360deg);
Expand Down

0 comments on commit 00ce33a

Please sign in to comment.