Progress Animation For Your WebPage With Free Source Code On Telegram Channel

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | A Pen by Jhey</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
      <section>
        <h1>Please Scroll !!!</h1>
      </section>
      <div class="content">
        <svg viewBox="0 0 1440 4096" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g class="backers">
            <path d="M-3317 96H387c276.142 0 500 223.858 500 500v1064.51c0 99.41-80.589 180-180 180H434.99c-99.412 0-180.001 80.58-180.001 180V4248" stroke="red" stroke-width="100" stroke-linecap="round"/>
            <path d="M4379 804H1387c-276.14 0-499.997 223.86-499.997 500v356.51c0 99.41-80.589 180-180 180H434.991c-99.411 0-180 80.59-180 180V4248" stroke="red" stroke-width="100" stroke-linecap="round"/>
            <path d="M4423 96H1387.02c-276.14 0-500.001 223.858-500.001 500.001V1660.51c0 99.41-80.589 180-180 180H434.995c-99.411 0-180 80.59-180 180l.001 2227.49" stroke="red" stroke-width="100" stroke-linecap="round"/>
          </g>
          <g class="fillers">
            <path d="M-3317 96H387c276.142 0 500 223.858 500 500v1064.51c0 99.41-80.589 180-180 180H434.99c-99.412 0-180.001 80.58-180.001 180V4248" stroke="red" stroke-width="100" stroke-linecap="round"/>
            <path d="M4379 804H1387c-276.14 0-499.997 223.86-499.997 500v356.51c0 99.41-80.589 180-180 180H434.991c-99.411 0-180 80.59-180 180V4248" stroke="red" stroke-width="100" stroke-linecap="round"/>
            <path d="M4423 96H1387.02c-276.14 0-500.001 223.858-500.001 500.001V1660.51c0 99.41-80.589 180-180 180H434.995c-99.411 0-180 80.59-180 180l.001 2227.49" stroke="red" stroke-width="100" stroke-linecap="round"/>
          </g>
        </svg>
        <section>
          <h2>Perhaps.</h2>
        </section>
        <section>
          <h2>We could scroll</h2>
        </section>
        <section>
          <h2>to the root</h2>
        </section>
        <section>
          <h2>of it.</h2>
        </section>
      </div>
    </main>
<!-- partial -->
  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import "normalize.css";

@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	font-family:  "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
	font-weight: 100;
	color: hsl(0 0% 6%);
}

h1 {
	font-weight: 140;
	font-size: clamp(2rem, 4vw + 1rem, 6rem);
	background: linear-gradient(hsl(0 0% 50%), hsl(0 0% 20%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-animation: scale-down linear both;
	        animation: scale-down linear both;
	animation-timeline: scroll();
	animation-range: 0 50vh;
}

@-webkit-keyframes scale-down {
	to { scale: 0.75; }
}

@keyframes scale-down {
	to { scale: 0.75; }
}

.content {
  background: black;
  width: 100%;
  position: relative;
  overflow: hidden;
  scale: 0.95;
}

@supports (animation-timeline: scroll()) {
	.content {
	  view-timeline: --content;
	  -webkit-animation: grow linear both;
	          animation: grow linear both;
	  animation-timeline: scroll();
	  animation-range: 0 50vh;
	}
}

@-webkit-keyframes grow {
	to { scale: 1; }
}

@keyframes grow {
	to { scale: 1; }
}

.content svg {
  height: 100%;
  position: absolute;
  right: 0%;
  top: 0;
  overflow: visible !important;
  z-index: -1;
}

.content svg path {
  stroke-width: clamp(2rem, 2vw, 4rem);
}

@media only screen and (orientation: portrait) {
  svg {
    display: none;
  }
}

section {
  height: 100vh;
}

main > section {
  height: 80vh;
  display: grid;
  place-items: center;
  position: sticky;
  top: 0;
}

main {
  width: 100%;
}

.backers path {
	stroke: hsl(0 0% 50%);
}

.fillers path {
	stroke: hsl(0 100% 50% / 1);
}

.fillers path:nth-of-type(1) {
	--len: 8620;
	stroke: hsl(140 80% 60%);
}
.fillers path:nth-of-type(2) {
	--len: 7200;
	stroke: hsl(140 90% 60%);
}
.fillers path:nth-of-type(3) {
	--len: 7952;
	stroke: hsl(140 90% 50%);
}

.fillers path {
	stroke-dasharray: var(--len);
	stroke-dashoffset: var(--len);
}

@supports (animation-timeline: scroll()) {
	.fillers path {
		-webkit-animation: fill linear both;
		        animation: fill linear both;
		animation-timeline: --content;
		animation-range: entry-crossing -38% exit 12%;
	}
}

@-webkit-keyframes fill {
	to { stroke-dashoffset: 0; }
}

@keyframes fill {
	to { stroke-dashoffset: 0; }
}

.content section {
	display: grid;
	align-content: center;
	padding: 0 6rem;
}

section h2 {
	font-size: clamp(2rem, 4vw + 1rem, 4rem);
	font-weight: 120;
	color: hsl(0 0% 90%);
	width: 10ch;
  white-space: nowrap;
}

section:nth-of-type(3),
section:nth-of-type(4) {
	justify-items: end;
}

a {
	width: 56px;
	display: inline-block;
	aspect-ratio: 1;
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10;
	border-radius: 50%;
	background: hsl(0 0% 100%);
	display: grid;
	place-items: center;
}

a img {
	width: 80%;
}

if (!CSS.supports('animation-timeline: scroll()')) {
  gsap.registerPlugin(ScrollTrigger);
  gsap.to('.content', {
    scrollTrigger: {
      trigger: 'body',
      scrub: 0.5,
      start: "top top",
      end: window.innerHeight * 0.4 },

    scale: 1 });

  gsap.to('.fillers path', {
    scrollTrigger: {
      trigger: '.content',
      scrub: 0.5,
      ease: 'power4.in',
      start: "top bottom+=20%",
      end: "bottom bottom-=50%" },

    strokeDashoffset: 0 });

}