Skip to content

Commit

Permalink
Added loading animation to Contributors page (#1315)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pandeyji711
pandeyji711 authored Jun 14, 2024
1 parent 55ba9f0 commit 663e8ae
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 29 deletions.
87 changes: 60 additions & 27 deletions assets/contributors/contributor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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),
Expand All @@ -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 */
Expand Down Expand Up @@ -196,7 +231,6 @@ body {
bottom: 0;
right: 0;
margin: 0 2rem 2rem 0;

height: fit-content;
width: fit-content;
z-index: 100000;
Expand All @@ -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;
}
}
118 changes: 116 additions & 2 deletions assets/contributors/contributor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,121 @@
</header>

<h1>Faces of Dedication: Our Contributing Heroes</h1>
<div id="contributor"></div>

<div id="contributor">
<div id="grid">
<!-- Placeholder elements -->
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<!-- Add more placeholders as needed -->
</div>
</div>

<!-------------------------------------Footer Code Starts --------------------------------------------->
<div class="footer-basic">
Expand Down Expand Up @@ -95,4 +209,4 @@ <h1>Faces of Dedication: Our Contributing Heroes</h1>

</body>

</html>
</html>
5 changes: 5 additions & 0 deletions assets/contributors/contributor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,14 @@ async function fetchContributors(pageNumber) {
}

const contributorsData = await response.json();

return contributorsData;
}

// Function to fetch all contributors
async function fetchAllContributors() {
// const loading = document.getElementById("grid");
// if (loading) loading.remove(loading.firstChild);
let allContributors = [];
let pageNumber = 1;

Expand All @@ -68,6 +71,8 @@ async function fetchAllContributors() {
pageNumber++;
}
allContributors.forEach((contributor) => {
const loading = document.getElementById("grid");
if (loading) loading.remove(loading.firstChild);
if (contributor.login === owner) {
return;
}
Expand Down

0 comments on commit 663e8ae

Please sign in to comment.