Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Progress Bar on Scroll Reveal #95

Merged
merged 5 commits into from
Oct 3, 2021
Merged

Added Progress Bar on Scroll Reveal #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
42914cb
added progress bars
asmitbm Oct 3, 2021
0d150b1
added progress bars
asmitbm Oct 3, 2021
c09a9aa
added gif
asmitbm Oct 3, 2021
23fc773
updated
asmitbm Oct 3, 2021
247afd0
Update README.md
asmitbm Oct 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions HTML+CSS+JS/Progress-Bar/Progress-bar-scroll-reveal/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
## Progress Bars reveal on Scroll

If you want to trigger the skill or progress bars when you scroll down the page, you can use this code snippet. What this does is, whenever you scroll down the page, it activates the scroll bar and it transitions from left to right.

## Demo

![gif](progress-bars.gif)

## Setup

Just download the files and run `index.html`.

## Author

[Asmit Malakannawar](https://github.com/Asmit2952)
41 changes: 41 additions & 0 deletions HTML+CSS+JS/Progress-Bar/Progress-bar-scroll-reveal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap">
<link rel="stylesheet" href="style.css">
<title>Progress Bars</title>
</head>
<body>
<div class="back">
<img src="wallpaperflare.com_wallpaper (8).jpg" alt="">
</div>
<div class="skill_container">
<div id="progressbar"></div>
<div class="skillbox">
<p class="sk">Front-End</p>
<div class="container">
<div id="fe-bar"></div>
</div>

<p class="sk">Back-End</p>
<div class="container">
<div id="be-bar"></div>
</div>

<p class="sk">Cloud Platform</p>
<div class="container">
<div id="cp-bar"></div>
</div>

<p class="sk">UI/UX</p>
<div class="container">
<div id="uiux-bar"></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions HTML+CSS+JS/Progress-Bar/Progress-bar-scroll-reveal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
let progress = document.getElementById('progressbar');
window.onscroll = function () {
let totalHeight = document.body.scrollHeight + window.innerHeight;
let progressHeight = (window.pageYOffset / totalHeight) * 20.1;
progress.style.display = 'revert';
progress.style.height = progressHeight + "%";
let flowBar1 = document.getElementById('fe-bar');
let flowBar2 = document.getElementById('be-bar');
let flowBar3 = document.getElementById('cp-bar');
let flowBar4 = document.getElementById('uiux-bar');
if (progressHeight > 3) {

flowBar1.style.animationName = 'animateskillbar11';
flowBar2.style.animationName = 'animateskillbar22';
flowBar3.style.animationName = 'animateskillbar33';
flowBar4.style.animationName = 'animateskillbar44';
}
else {
flowBar1.style.animationName = 'animateskillbar1';
flowBar2.style.animationName = 'animateskillbar2';
flowBar3.style.animationName = 'animateskillbar3';
flowBar4.style.animationName = 'animateskillbar4';
}

}
Binary file added HTML+CSS+JS/Progress-Bar/Progress-bar-scroll-reveal/progress-bars.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
132 changes: 132 additions & 0 deletions HTML+CSS+JS/Progress-Bar/Progress-bar-scroll-reveal/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@

img {
display: block;
width: 100%;
height: auto;
}
.skill_container {
position: relative;
}

.skillbox {
position: relative;
width: 90%;
top: -15%;
left: 4%;
display: inline-block;
}

.skillbox p{
font-family:'Poppins', sans-serif;
margin-left: 3%;
font-size: 24px;
font-weight: 500;
}
.container {
margin-left: 7%;
width: 80%;
height: 10px;
background-color: #747474;
border-radius: 15px;
margin-bottom: 5%;
}

#fe-bar {
width: 0%;
height: 10px;
border-radius: 15px;
background: linear-gradient(86deg, rgba(66,133,244,1) 0%, rgba(1,166,240,1) 100%);
animation: animateskillbar1 1s 2s cubic-bezier(1,0,0.5,1) forwards;
}

@keyframes animateskillbar11{
0%{
width: 0%;
}
100%{
width: 85%;
}
}
@keyframes animateskillbar1{
0%{
width: 0%;
}
100%{
width: 0%;
}
}


#be-bar{
width: 0%;
height: 10px;
border-radius: 15px;
background: linear-gradient(90deg, rgba(234,67,53,1) 0%, rgba(243,79,28,1) 100%);
animation: animateskillbar2 1s 2s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animateskillbar22{
0%{
width: 0%;
}
100%{
width: 40%;
}
}
@keyframes animateskillbar2{
0%{
width: 0%;
}
100%{
width: 0%;
}
}


#cp-bar{
width: 0%;
height: 10px;
border-radius: 15px;
background: linear-gradient(90deg, rgba(52,168,83,1) 0%, rgba(127,188,0,1) 100%);
animation: animateskillbar3 1s 2s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animateskillbar33{
0%{
width: 0%;
}
100%{
width: 65%;
}
}
@keyframes animateskillbar3{
0%{
width: 0%;
}
100%{
width: 0%;
}
}


#uiux-bar{
width: 0%;
height: 10px;
border-radius: 15px;
background: linear-gradient(90deg, rgba(251,188,5,1) 0%, rgba(255,186,1,1) 100%);
animation: animateskillbar4 1s 2s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animateskillbar44{
0%{
width: 0%;
}
100%{
width: 80%;
}
}
@keyframes animateskillbar4{
0%{
width: 0%;
}
100%{
width: 0%;
}
}
Binary file added ...JS/Progress-Bar/Progress-bar-scroll-reveal/wallpaperflare.com_wallpaper (8).jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions HTML+CSS+JS/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@

- [Progress Bar](Progress-Bar)
- [Gradient Progress Bar](Progress-Bar/gradient-progress)
- [Progress Bar - Scroll Reveal](Progress-Bar/Progress-bar-scroll-reveal)
- [Background](Background)

- [Animated Background](Background/Animated-Background)
Expand Down