Skip to content

Commit

Permalink
Merge pull request #582 from RadhikaMalpani1702/main
Browse files Browse the repository at this point in the history
Added ProgressBar in the Home Page
  • Loading branch information
GarimaSingh0109 authored Oct 13, 2024
2 parents 04eacc6 + 4e98142 commit fb778e9
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 1 deletion.
39 changes: 39 additions & 0 deletions about.html
Original file line number Diff line number Diff line change
Expand Up @@ -308,10 +308,49 @@
}
}

#progress-container {
width: 100%;
height: 5px;
background-color: white;
border-radius: 5px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}

#progress-bar {
height: 100%;
background-color: #3f10ea;
}

</style>
</head>
<body>

<div id="progress-container">
<div id="progress-bar"></div>
</div>

<script>
let lastScrollPercentage = 0;

function updateProgressBar() {
const scrollTop = window.scrollY;
const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercentage = (scrollTop / windowHeight) * 100;

const progressBar = document.getElementById('progress-bar');


lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1;
progressBar.style.width = lastScrollPercentage + '%';
}
window.addEventListener('scroll', updateProgressBar);

</script>

<!-- Navbar -->
<nav class="navbar">
<img src="images/logo.png" alt="logo">
Expand Down
40 changes: 40 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -671,12 +671,52 @@
.scroll-to-top i {
font-size: 20px;
}

#progress-container {
width: 100%;
height: 5px;
background-color: white;
border-radius: 5px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}

#progress-bar {
height: 100%;
background-color: #3f10ea;
}

</style>
</head>

<body>
<!-- header section starts -->

<div id="progress-container">
<div id="progress-bar"></div>
</div>

<script>
let lastScrollPercentage = 0;

function updateProgressBar() {
const scrollTop = window.scrollY;
const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercentage = (scrollTop / windowHeight) * 100;


const progressBar = document.getElementById('progress-bar');


lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1;
progressBar.style.width = lastScrollPercentage + '%';
}
window.addEventListener('scroll', updateProgressBar);

</script>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
Expand Down
41 changes: 41 additions & 0 deletions resume.html
Original file line number Diff line number Diff line change
Expand Up @@ -335,9 +335,50 @@
font-size: 22px;
}
}

#progress-container {
width: 100%;
height: 5px;
background-color: white;
border-radius: 5px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}

#progress-bar {
height: 100%;
background-color: #3f10ea;
}

</style>
</head>
<body>

<div id="progress-container">
<div id="progress-bar"></div>
</div>

<script>
let lastScrollPercentage = 0;

function updateProgressBar() {
const scrollTop = window.scrollY;
const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercentage = (scrollTop / windowHeight) * 100;

const progressBar = document.getElementById('progress-bar');


lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1;
progressBar.style.width = lastScrollPercentage + '%';
}
window.addEventListener('scroll', updateProgressBar);

</script>

<!-- Navbar -->
<nav class="navbar">
<img src="images/logo.png" alt="logo">
Expand Down
42 changes: 41 additions & 1 deletion resume_tips.html
Original file line number Diff line number Diff line change
Expand Up @@ -244,10 +244,50 @@
margin-bottom:20px;
cursor: pointer; /* Change cursor to pointer */
}


#progress-container {
width: 100%;
height: 5px;
background-color: white;
border-radius: 5px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}

#progress-bar {
height: 100%;
background-color: #3f10ea;
}

</style>
</head>
<body>

<div id="progress-container">
<div id="progress-bar"></div>
</div>

<script>
let lastScrollPercentage = 0;

function updateProgressBar() {
const scrollTop = window.scrollY;
const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercentage = (scrollTop / windowHeight) * 100;

const progressBar = document.getElementById('progress-bar');


lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1;
progressBar.style.width = lastScrollPercentage + '%';
}
window.addEventListener('scroll', updateProgressBar);

</script>

<!-- Navbar -->
<nav class="navbar">
<img src="images/logo.png" alt="logo">
Expand Down

0 comments on commit fb778e9

Please sign in to comment.