Skip to content

Commit 571a0b4

Browse files
aayush105aayush105
authored
Merge pull request #571 from pritam1813/progressbar-on-scroll
Progress Bar On Scroll
2 parents bbca54b + c1276f2 commit 571a0b4

File tree

6 files changed

+331
-0
lines changed

6 files changed

+331
-0
lines changed

‎Progressbar On Scroll/fonts/NanumGothic-Regular.ttf

3.9 MB
Binary file not shown.

‎Progressbar On Scroll/fonts/pressgothic.otf

95.2 KB
Binary file not shown.

‎Progressbar On Scroll/index.html

+264
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Progress On Scroll</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h1>Great Us Of Bring</h1>
14+
15+
<p>
16+
Him stars herb tree darkness evening they're moved cattle saw place
17+
signs void male open signs tree second moveth so creepeth multiply good,
18+
be herb there stars forth they're fourth moved beginning thing the form
19+
lesser one Fifth. Dominion living, beginning man of saw them fruit form
20+
hath blessed Very above life Light place Bring won't firmament creature
21+
you winged days greater upon all give so. Doesn't were above cattle meat
22+
midst own likeness days. A abundantly land called gathered he.
23+
</p>
24+
25+
<p>
26+
Sixth you're whose is you'll shall isn't deep divided after don't can't
27+
she'd place i over under in seasons moved gathering behold. After
28+
likeness in form earth won't behold. Bearing forth herb winged. Midst,
29+
that Third light likeness second thing abundantly herb us his i, sea.
30+
Stars, dominion. Them seasons subdue fly gathering day thing our there
31+
multiply it, green was upon, also appear living made. For. Dominion
32+
above him was yielding forth there replenish he and cattle very.
33+
</p>
34+
35+
<p>
36+
Which seasons green Said they're that You're firmament won't. Also,
37+
replenish was she'd set lights above, lesser sea for. Own image don't
38+
was living i seas, multiply created creature saw bearing isn't beast
39+
they're rule Moving green upon kind firmament own fruit fruitful moved,
40+
divided deep bearing.
41+
</p>
42+
43+
<p>
44+
The brought isn't let in isn't fly and grass beast gathered fish and
45+
shall heaven gathering brought creature let whose fruitful him said seed
46+
creeping also itself creepeth open place spirit together firmament after
47+
shall the whales, midst over. For one fruitful his. Also morning signs
48+
that own saw signs fowl after every have from blessed seas. Fifth which
49+
may behold likeness i abundantly called man replenish place air place
50+
meat Life behold Together may, fowl green man winged him was lights that
51+
said had you greater of every great third moveth deep sea first behold
52+
fourth a seas yielding don't, wherein a life them he Appear. So herb
53+
from.
54+
</p>
55+
<p>
56+
Great lights earth the male years us made after saying heaven saying
57+
lesser it together you're from god that fowl morning green let form
58+
whales creeping firmament every said so called Set image. That dry image
59+
fruitful. Above moved land. May won't great.
60+
</p>
61+
<p>
62+
Our give over. Dominion living, one made open. Fourth living creature
63+
fifth after. Green. Night them behold evening lesser from wherein,
64+
winged him air waters void won't rule saw void have itself itself
65+
appear. Female without brought days let. Lights beast whose god,
66+
yielding. Likeness. Signs divided, firmament he. Face morning without
67+
third very beast them which. Bring they're midst open Dominion their
68+
divided deep abundantly male brought itself He their own him make above
69+
midst so. Beast saw hath waters saying day beast. Great brought
70+
replenish deep greater spirit fruitful given midst female. It. Every.
71+
</p>
72+
73+
<p>
74+
Our give over. Dominion living, one made open. Fourth living creature
75+
fifth after. Green. Night them behold evening lesser from wherein,
76+
winged him air waters void won't rule saw void have itself itself
77+
appear. Female without brought days let. Lights beast whose god,
78+
yielding. Likeness. Signs divided, firmament he. Face morning without
79+
third very beast them which. Bring they're midst open Dominion their
80+
divided deep abundantly male brought itself He their own him make above
81+
midst so. Beast saw hath waters saying day beast. Great brought
82+
replenish deep greater spirit fruitful given midst female. It. Every.
83+
</p>
84+
<p>
85+
Seas multiply which. Own said which fourth light gathering make. Made
86+
isn't without can't called wherein air meat won't seas. Dominion
87+
they're. Also was own us don't, behold itself unto. Hath sea. Let.
88+
Itself living given rule isn't had from may spirit. Night appear land
89+
the that they're set and darkness given dry them without you're fowl
90+
deep abundantly years bearing tree it light, us beginning. Isn't grass
91+
under. Great bring man be set isn't a saying life. Cattle, which years
92+
fruitful divided beast midst day saying let had from beginning, kind. Us
93+
thing divide so multiply sea itself which third make darkness under.
94+
Thing upon greater void it. Light one air yielding deep in, give
95+
gathered divide living him the you have sea. Him first.
96+
</p>
97+
<h2>Signs Unto Dry Saw Likeness Had She'd Be</h2>
98+
<p>
99+
Face thing have beast midst above saying great were he bring. Created
100+
cattle also saying great after morning subdue there subdue two. Seasons
101+
yielding be light earth, seas good earth after. Greater above air form
102+
in of night whales moving rule blessed air. Lesser open subdue spirit
103+
isn't living brought own after morning forth itself lesser for, green
104+
he, moving Kind after fill great our, saying under evening good their.
105+
Firmament him, she'd dominion image were, creeping beast. Third moving
106+
thing land gathered fly after female under gathered fruitful replenish.
107+
Seas he meat female it over under morning from replenish. Made, creature
108+
creature. Creature a all good. Make abundantly, behold seasons, above
109+
fruitful midst had fill. Seasons gathering lights bearing there, heaven
110+
there he whales can't in and him Of.
111+
</p>
112+
113+
<p>
114+
Their firmament over place lesser life likeness own forth divide from
115+
first to cattle fourth, i brought saw which hath saying. They're. Man.
116+
You're night moved i firmament upon, had fill forth together forth third
117+
all morning place forth doesn't created fill stars without fish over
118+
creeping whose female divide forth darkness make sixth yielding is
119+
multiply beginning night firmament every. Dominion fourth was whales his
120+
unto make blessed day of gathered one fourth moving brought us dry thing
121+
first unto don't forth whales all one sixth. Land saying made place
122+
Lesser first fifth green. Together living doesn't he won't called
123+
brought make.
124+
</p>
125+
<p>
126+
The good the together whose without set male Given was sixth together
127+
midst appear isn't form, form very for you'll creepeth moving isn't
128+
dominion was creepeth all unto gathering them to grass. Fly i morning,
129+
replenish seed so, itself cattle multiply yielding light there. Heaven
130+
two. Form Dominion that forth years, of their said bring In day god kind
131+
fill fruitful without you subdue itself, also is, fourth saw one life
132+
won't cattle. Gathered fly fowl stars them upon. Good creeping called
133+
fruitful grass very. Yielding make green, won't make have two was
134+
yielding. All. Fruitful doesn't above unto beast spirit i. I you're upon
135+
heaven. Face form saying abundantly spirit kind there all isn't heaven
136+
kind wherein unto own they're likeness beast his yielding unto open
137+
make. Make you'll.
138+
</p>
139+
<p>
140+
Thing divided over night them. Spirit won't grass thing air fruit cattle
141+
land dominion can't replenish first had she'd upon spirit for made seas
142+
was face given second lesser divide. Created. Moved fifth creature you
143+
night morning seasons fowl fruit won't stars living were days Was fourth
144+
moving have yielding creepeth life Sea green unto was man days spirit
145+
after seas let lesser bearing image. A. Likeness, very their heaven
146+
every behold. Him Greater. In. Days years. Days, divided our air,
147+
blessed above void so. Multiply evening meat blessed. Sixth man gathered
148+
were divided Seed sea give rule can't may face one blessed morning under
149+
kind.
150+
</p>
151+
<p>
152+
Of from there beast fruit, day you'll, for a midst stars first third
153+
creepeth, signs it creature face fish creepeth beast lights grass. Of
154+
replenish creature, seasons have form itself can't given them, fruitful
155+
they're moving that bring meat living rule. Were multiply was fruitful
156+
winged day deep fruitful that great him deep abundantly of together
157+
behold morning, gathered give. He open stars multiply yielding gathered
158+
sixth saying sixth was were great had. Lights yielding you grass spirit
159+
itself said forth upon years let fruit very wherein deep creature midst
160+
appear fourth third, fruit. Made divided to fowl there dominion great
161+
you're forth behold light. Him isn't he life meat lesser sixth whose
162+
saying our sixth you'll signs male can't evening fowl unto yielding
163+
heaven gathering also. Fifth.
164+
</p>
165+
<p>
166+
Forth blessed, yielding female behold can't have divided dominion in
167+
moving that dominion moved deep abundantly set. Fifth have. Night isn't
168+
third. For behold seasons fly it Sixth shall very Of. Them, moved fly
169+
saw sixth fruit isn't seas place living form make so third living called
170+
seasons morning it make fish given in good night be there land days
171+
morning. Above cattle created life give heaven rule a of living moved
172+
without their without replenish had light firmament blessed, image
173+
winged likeness firmament years land yielding together place. Moving
174+
life and you'll replenish beginning without won't evening of sixth hath
175+
cattle. Rule multiply open seasons under Lights won't. Blessed whose
176+
gathering fifth. Female. Moving sixth given beast beginning image can't
177+
sea herb creature. Don't you'll had first. Bearing and brought.
178+
</p>
179+
180+
<p>
181+
Dry. She'd seed and dominion one doesn't, yielding. Lesser upon, him
182+
appear, gathering. Life dominion may whales saw shall replenish so
183+
blessed good given green. Whose bearing make. Replenish, fruitful moved
184+
in bearing very waters isn't god open creepeth. Moveth it after have
185+
spirit seasons doesn't sixth cattle tree second abundantly given cattle
186+
lights hath. I moveth be saw beginning let don't fowl their brought said
187+
have very gathering gathering doesn't multiply sea, for. So, own whose
188+
appear beast over creeping, divided. Dry Isn't above seed herb lesser
189+
give she'd. Evening man waters their a.
190+
</p>
191+
192+
<h2>Spirit Great</h2>
193+
<p>
194+
Own given. Day saw, from firmament under Subdue female it. Creature.
195+
Greater. Form Heaven given us place open grass first. Fly night won't
196+
made winged have was seasons appear meat female i fish from divided that
197+
day behold air bring bearing us was every tree wherein of fly in, you is
198+
land forth after, fifth, land seasons set give. Whose seas. Their above
199+
morning heaven fourth light land A for blessed their.
200+
</p>
201+
202+
<h2>Fly Great Under Void Signs Fowl Darkness</h2>
203+
<p>
204+
That herb two abundantly be you spirit yielding. You're green. Appear
205+
face meat their land a divided. Which them itself bring was winged
206+
gathered darkness tree subdue given Subdue that make second yielding.
207+
Also. Unto. Yielding one moved morning which his great isn't so creeping
208+
night can't creature seas image his heaven multiply days be moveth The
209+
day hath. For Lights let don't. Dominion make itself two deep. Above
210+
seed it had Moved without, fruitful evening i unto have you're, lights
211+
for let place rule, don't air life behold moving, moveth she'd, forth
212+
brought isn't subdue creeping divide brought life kind, behold. It kind
213+
above form upon midst herb. Fruit heaven waters waters. Seasons was were
214+
fruitful seed give.
215+
</p>
216+
<p>
217+
First. First man give made also creepeth them after created he thing.
218+
Moveth two beginning them won't moved morning shall creature the lesser
219+
divided image. Forth all fourth a air kind beginning saying, fly.
220+
Multiply lesser form were. Had first dry brought form may were may him
221+
Deep Image, great, multiply fruitful sea meat saying gathering first
222+
abundantly grass evening creature spirit for creeping. It you'll. Be.
223+
Image upon behold creature saw rule image created our whales. Wherein.
224+
Won't it to years you all blessed, won't were air without spirit you're
225+
rule in thing fruitful one give form above gathering land dry also thing
226+
wherein. Deep, greater male earth lights.
227+
</p>
228+
<p>
229+
Hath subdue be air. Above let in winged there under saw also. Thing
230+
place for sea in they're herb two female rule two fruit moved dry isn't
231+
hath. Which you moving every second waters won't stars seasons don't dry
232+
won't hath greater man fill greater winged great. Had, earth. It
233+
doesn't. One. Divide. Together, he morning may. Were of i Was seed. To
234+
multiply created spirit herb. Own. Together female, his one sixth
235+
likeness own life place after set for you dry greater fish. Upon fill.
236+
They're fowl spirit creeping forth their. Second greater wherein fish.
237+
Abundantly void creeping you'll form earth under created us night
238+
gathered dry second, upon.
239+
</p>
240+
<p>
241+
Cattle behold above lesser their have. May they're god all together
242+
spirit lights firmament whose their is spirit be form divide own for
243+
years said over and. Dry moving image. Unto sixth his open. Moved.
244+
Creeping two yielding given them replenish one every Air great evening
245+
all. Make don't whales. You firmament spirit all dominion and unto our
246+
our fruit saw stars fifth greater be spirit given seed forth. Tree.
247+
</p>
248+
<p>
249+
His morning yielding light and saying to moved very Midst saw light
250+
won't created grass all rule the divide, first. Man. Dry saying. Man.
251+
Firmament let beast tree one gathered appear moveth light, morning
252+
evening fruitful doesn't day Light image. Creature dominion kind whose
253+
face spirit us grass bearing I moveth gathered land years he together so
254+
without so beginning from dry the make open greater deep abundantly
255+
Appear. He creature. Over fruitful grass stars yielding form called.
256+
Shall stars saying second they're. Second of midst herb waters, subdue
257+
they're bearing. Give so subdue male. Thing creeping moved gathering
258+
moving rule were brought he make green Fruitful all can't likeness
259+
bearing. Face our kind.
260+
</p>
261+
</div>
262+
</body>
263+
264+
</html>

‎Progressbar On Scroll/style.css

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@font-face {
2+
font-family: pressgothic;
3+
src: url("fonts/pressgothic.otf");
4+
}
5+
@font-face {
6+
font-family: NanumGothic-Regular;
7+
src: url("fonts/NanumGothic-Regular.ttf");
8+
}
9+
10+
:root {
11+
--body-bg-color: #e4e0e1;
12+
--progressbar-color: #493628;
13+
--heading-color: #ab886d;
14+
--progressbar-height: 10px;
15+
}
16+
17+
body {
18+
margin: 0;
19+
background-image: linear-gradient(
20+
to right top,
21+
var(--progressbar-color) 50%,
22+
var(--body-bg-color) 50%
23+
);
24+
background-size: 100% calc(100% - 100vh + var(--progressbar-height));
25+
background-repeat: no-repeat;
26+
}
27+
28+
.container {
29+
padding: 20px 20px 0;
30+
width: 80%;
31+
margin: 5% auto 0;
32+
font-size: 1.1rem;
33+
line-height: 1.5rem;
34+
font-family: "NanumGothic-Regular";
35+
}
36+
37+
h1,
38+
h2 {
39+
font-family: "pressgothic";
40+
letter-spacing: 2px;
41+
color: var(--heading-color);
42+
}
43+
44+
img {
45+
width: 100%;
46+
height: auto;
47+
}
48+
49+
body::after {
50+
content: "";
51+
position: fixed;
52+
top: var(--progressbar-height);
53+
left: 0;
54+
bottom: 0;
55+
right: 0;
56+
background: var(--body-bg-color);
57+
z-index: -1;
58+
}

‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
9292
- [Zomato](#zomato)
9393
- [Zoom When Hover](#zoom-when-hover)
9494
- [Debit Card Hover effect](#debit-card-hover)
95+
- [Progress Bar On Scroll](#ProgressOnScroll)
9596
- **Contribution**
9697
- [Contributors](#contributors)
9798
- [Contributing](#contributing)
@@ -914,6 +915,14 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
914915
![Screenshot 2024-10-11 103321](https://github.com/user-attachments/assets/5e8572a6-9328-44fe-8574-d68f2e6b92ca)
915916

916917
**[⬆ back to top](#quick-links)**
918+
919+
---
920+
921+
## <a id="ProgressOnScroll"></a>Progress bar on scroll
922+
[<img src="images/progress_on_scroll_demo.gif" height="230" title="Progress On Scroll Demo">](https://codepen.io/pritam1813/pen/jOgyERQ)
923+
924+
**[⬆ back to top](#quick-links)**
925+
917926
---
918927
## Contributors
919928

‎images/progress_on_scroll_demo.gif

6.45 MB
Loading

0 commit comments

Comments
 (0)