From 663e8ae47d8b3ac439f5169538863cb351e8f258 Mon Sep 17 00:00:00 2001
From: Anurag Pandey <154527778+pandeyji711@users.noreply.github.com>
Date: Fri, 14 Jun 2024 19:46:00 +0530
Subject: [PATCH] Added loading animation to Contributors page (#1315)
---
assets/contributors/contributor.css | 87 ++++++++++++++------
assets/contributors/contributor.html | 118 ++++++++++++++++++++++++++-
assets/contributors/contributor.js | 5 ++
3 files changed, 181 insertions(+), 29 deletions(-)
diff --git a/assets/contributors/contributor.css b/assets/contributors/contributor.css
index 82569139e..ebbc8391e 100644
--- a/assets/contributors/contributor.css
+++ b/assets/contributors/contributor.css
@@ -6,11 +6,37 @@
--dark: #f50414;
}
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
+body {
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-image: url(../../assets/images/background.jpg);
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ font-size: 1.4rem;
+}
+
+body,
+html {
+ font-family: "Poppins", sans-serif;
+ font-weight: 300;
+ line-height: 1.4;
+ scroll-behavior: smooth;
+}
+
h1 {
font-family: Arial, sans-serif;
font-weight: bold;
@@ -35,34 +61,45 @@ h1:hover {
align-items: center;
}
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+#grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+ gap: 10px;
+ width: 90%;
}
-div {
- display: block;
+.placeholder {
+ width: 95px;
+ height: 95px;
+ background-color: #ccc;
+ border-radius: 50%;
+ position: relative;
+ overflow: hidden;
}
-body,
-html {
- font-family: "Poppins", sans-serif;
- font-weight: 300;
- line-height: 1.4;
- scroll-behavior: smooth;
+.placeholder::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -150%;
+ width: 200%;
+ height: 100%;
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
+ animation: loading 0.7s infinite;
}
-body {
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- background-image: url(../../assets/images/background.jpg);
- background-attachment: fixed;
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- font-size: 1.4rem;
+@keyframes loading {
+ 0% {
+ transform: translateX(-100%);
+ }
+
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+div {
+ display: block;
}
.contributor-card:nth-child(4n+1),
@@ -80,14 +117,12 @@ body {
.contributor-card:hover {
box-shadow: 0 0 10px rgba(253, 251, 251, 0.5);
- /* Adjust the color and size of the glow as needed */
}
.contributor-card:active {
transform: scale(1.1);
opacity: 0.8;
box-shadow: 0 0 20px rgb(188, 240, 210);
- /* Adjust the color and size of the glow as needed */
}
/* Footer Styling */
@@ -196,7 +231,6 @@ body {
bottom: 0;
right: 0;
margin: 0 2rem 2rem 0;
-
height: fit-content;
width: fit-content;
z-index: 100000;
@@ -207,8 +241,7 @@ body {
height: 42px;
width: 42px;
background-color: rgba(255, 255, 255, 0.9);
-
border: 0;
cursor: pointer;
box-shadow: 0px 0px 10px 1px palevioletred;
-}
\ No newline at end of file
+}
diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html
index 655a0ccb1..191ea3da3 100644
--- a/assets/contributors/contributor.html
+++ b/assets/contributors/contributor.html
@@ -61,7 +61,121 @@
Faces of Dedication: Our Contributing Heroes
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-