Zachary Palmer

Zachary Palmer

1656659535

How to Create Circular Progress Bar with HTML, CSS & JavaScript

How To Make Circular Progress Bar | HTML CSS JavaScript - Make a Circular Progress Bar | HTML CSS JavaScript, step-by-step from scratch.

JavaScript Circular Progress bar is used on various websites to show education and experience. I made this circle progress bar with the help of HTML CSS and javascript. In the meantime, I have designed another Progress Bar with the help of Bootstrap.

This design is made much simpler and fully responsive. Here I made three bars. The first is for displaying HTML, the second for CSS, and the third for JavaScript percentages.

First of all, I have given the background color of web page # 0d0c2d. Then I made a box on that web page. I have kept the color of the box and the background color of the webpage the same. 

In this case, we have used a shadow in the box which indicates the size of this box. It has three Circular Progress Bars and each has a percentage and a text. I used color # 36e617 to show progress here. You can use any color you want here.

JavaScript Circular Progress Bar

It is made in a very simple and easy way. Here you can add percentages as you need.

Below I have given a demo section that will help you to better understand how it works. Here you will find the required source code which you can copy and use in your own work.

Circular Progress Bar using HTML, CSS, and JavaScript

If you are a beginner and want to know how to create Circle Progress Bar then follow the tutorial below.

I used some CDN links to make this. The first is JQuery and the second is easyPieChart. I have given the link of these two below. You can copy these links and add them to the head section of your HTML file.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>

Step 1: Design the progress bar's background

 First of all, I designed the background of this web page and made a box in it. In this box, I put all the Progress Bar. Webpage background: # 0d0c2d I have given blue and used height 100vh.

<div class="container">
 
</div>
body {
  margin: 0;
  padding: 0;
  justify-content: center;
  height: 100vh;
  color:white;
  background: #0d0c2d;
  font-family: sans-serif;
  display: flex;
}

.container {
  background: #0d0c2d;
  padding: 60px;
  display: grid;
  grid-template-columns: repeat(1, 160px);
  grid-gap: 80px;
  margin: auto 0;
  box-shadow: -5px -5px 8px rgba(94, 104, 121, 0.288),
              4px 4px 6px rgba(94, 104, 121, 0.288);
}
Design the progress bar's background

Step 2: Add basic information with HTML code 

Now I have added all the elements of this javascript circular progress bar using HTML code. Here data-percent = "" is used to determine the value of your circle progress bar. I have 90% for HTML, 72% for CSS and 81% for JavaScript. If you want to change, you can change the values ​​here.

With this, I have used a text that will help to know which bar is for which work. Now I have executed this Circular Progress Bar using the jQuery code. In order to execute the jquery code, I have first added the jquery CDN link.

  <div class="box">
    <div class="chart" data-percent="90" >90%</div>
    <h2>HTML</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="72" >72%</div>
    <h2>CSS</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="81" >81%</div>
    <h2>JAVASCRIPT</h2>
  </div>
Add basic information with HTML code

Step 3: Activate the progress bar using jquery

➤ First I used size: 160 which will determine the size of this circle.

➤ barColor: "# 36e617" I used which will determine this progressive color. Here I have used green. You can use any other color if you want.

➤ lineWidth: 15 basically helps to determine the size of the color line in this bar.

➤ trackColor: "# 525151" is here mainly for the background of the circular.

➤ I have used animate: 2000, which means it will take 2000 milliseconds (2 seconds) for the animation to take place. As a result, when you open the page, it will take you two seconds to reach the mean you set from zero.

$(function() {
  $('.chart').easyPieChart({
    size: 160,
    barColor: "#36e617",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#525151",
    lineCap: "circle",
    animate: 2000,
  });
});
Activate the progress bar using jquery

Step 4: Design the title

I designed the titles using the following CSS codes.

.container .box {
  width: 100%;
}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;
}
Design the title

Step 5: Design percentage text

 I designed and positioned the percentage I used here using the CSS codes below. If you have seen the demo, you will understand that the text here is placed in the middle of the progress bar. 

Used text-align: center and position: relative for this. I used font-size: 40px and the color white to make the text sizes a little bigger.

.container .box .chart {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #fff;
}
Design percent text

Step 6: Determine the position of the circle

I have specified the position of this circular progress bar using the following codes. For this, I have used position: absolute and left and top zero.

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}
Determine the position of the circle

Step 7: Make it responsive with CSS

 Now, this design is ready to use in any of your websites or project. However, I have made it responsive for all devices using some CSS code below. I have used CSS's @media for this. Then I have determined how it will look for any screen size.

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 160px);
  }
}

@media (min-width: 660px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

Hopefully from this tutorial, you have learned step by step how I have created this circular progress bar using HTML CSS and javaScript

#html #css #javascript #programming #webdev 

What is GEEK

Buddha Community

How to Create Circular Progress Bar with HTML, CSS & JavaScript
Easter  Deckow

Easter Deckow

1655630160

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Install via pip:

$ pip install pytumblr

Install from source:

$ git clone https://github.com/tumblr/pytumblr.git
$ cd pytumblr
$ python setup.py install

Usage

Create a client

A pytumblr.TumblrRestClient is the object you'll make all of your calls to the Tumblr API through. Creating one is this easy:

client = pytumblr.TumblrRestClient(
    '<consumer_key>',
    '<consumer_secret>',
    '<oauth_token>',
    '<oauth_secret>',
)

client.info() # Grabs the current user information

Two easy ways to get your credentials to are:

  1. The built-in interactive_console.py tool (if you already have a consumer key & secret)
  2. The Tumblr API console at https://api.tumblr.com/console
  3. Get sample login code at https://api.tumblr.com/console/calls/user/info

Supported Methods

User Methods

client.info() # get information about the authenticating user
client.dashboard() # get the dashboard for the authenticating user
client.likes() # get the likes for the authenticating user
client.following() # get the blogs followed by the authenticating user

client.follow('codingjester.tumblr.com') # follow a blog
client.unfollow('codingjester.tumblr.com') # unfollow a blog

client.like(id, reblogkey) # like a post
client.unlike(id, reblogkey) # unlike a post

Blog Methods

client.blog_info(blogName) # get information about a blog
client.posts(blogName, **params) # get posts for a blog
client.avatar(blogName) # get the avatar for a blog
client.blog_likes(blogName) # get the likes on a blog
client.followers(blogName) # get the followers of a blog
client.blog_following(blogName) # get the publicly exposed blogs that [blogName] follows
client.queue(blogName) # get the queue for a given blog
client.submission(blogName) # get the submissions for a given blog

Post Methods

Creating posts

PyTumblr lets you create all of the various types that Tumblr supports. When using these types there are a few defaults that are able to be used with any post type.

The default supported types are described below.

  • state - a string, the state of the post. Supported types are published, draft, queue, private
  • tags - a list, a list of strings that you want tagged on the post. eg: ["testing", "magic", "1"]
  • tweet - a string, the string of the customized tweet you want. eg: "Man I love my mega awesome post!"
  • date - a string, the customized GMT that you want
  • format - a string, the format that your post is in. Support types are html or markdown
  • slug - a string, the slug for the url of the post you want

We'll show examples throughout of these default examples while showcasing all the specific post types.

Creating a photo post

Creating a photo post supports a bunch of different options plus the described default options * caption - a string, the user supplied caption * link - a string, the "click-through" url for the photo * source - a string, the url for the photo you want to use (use this or the data parameter) * data - a list or string, a list of filepaths or a single file path for multipart file upload

#Creates a photo post using a source URL
client.create_photo(blogName, state="published", tags=["testing", "ok"],
                    source="https://68.media.tumblr.com/b965fbb2e501610a29d80ffb6fb3e1ad/tumblr_n55vdeTse11rn1906o1_500.jpg")

#Creates a photo post using a local filepath
client.create_photo(blogName, state="queue", tags=["testing", "ok"],
                    tweet="Woah this is an incredible sweet post [URL]",
                    data="/Users/johnb/path/to/my/image.jpg")

#Creates a photoset post using several local filepaths
client.create_photo(blogName, state="draft", tags=["jb is cool"], format="markdown",
                    data=["/Users/johnb/path/to/my/image.jpg", "/Users/johnb/Pictures/kittens.jpg"],
                    caption="## Mega sweet kittens")

Creating a text post

Creating a text post supports the same options as default and just a two other parameters * title - a string, the optional title for the post. Supports markdown or html * body - a string, the body of the of the post. Supports markdown or html

#Creating a text post
client.create_text(blogName, state="published", slug="testing-text-posts", title="Testing", body="testing1 2 3 4")

Creating a quote post

Creating a quote post supports the same options as default and two other parameter * quote - a string, the full text of the qote. Supports markdown or html * source - a string, the cited source. HTML supported

#Creating a quote post
client.create_quote(blogName, state="queue", quote="I am the Walrus", source="Ringo")

Creating a link post

  • title - a string, the title of post that you want. Supports HTML entities.
  • url - a string, the url that you want to create a link post for.
  • description - a string, the desciption of the link that you have
#Create a link post
client.create_link(blogName, title="I like to search things, you should too.", url="https://duckduckgo.com",
                   description="Search is pretty cool when a duck does it.")

Creating a chat post

Creating a chat post supports the same options as default and two other parameters * title - a string, the title of the chat post * conversation - a string, the text of the conversation/chat, with diablog labels (no html)

#Create a chat post
chat = """John: Testing can be fun!
Renee: Testing is tedious and so are you.
John: Aw.
"""
client.create_chat(blogName, title="Renee just doesn't understand.", conversation=chat, tags=["renee", "testing"])

Creating an audio post

Creating an audio post allows for all default options and a has 3 other parameters. The only thing to keep in mind while dealing with audio posts is to make sure that you use the external_url parameter or data. You cannot use both at the same time. * caption - a string, the caption for your post * external_url - a string, the url of the site that hosts the audio file * data - a string, the filepath of the audio file you want to upload to Tumblr

#Creating an audio file
client.create_audio(blogName, caption="Rock out.", data="/Users/johnb/Music/my/new/sweet/album.mp3")

#lets use soundcloud!
client.create_audio(blogName, caption="Mega rock out.", external_url="https://soundcloud.com/skrillex/sets/recess")

Creating a video post

Creating a video post allows for all default options and has three other options. Like the other post types, it has some restrictions. You cannot use the embed and data parameters at the same time. * caption - a string, the caption for your post * embed - a string, the HTML embed code for the video * data - a string, the path of the file you want to upload

#Creating an upload from YouTube
client.create_video(blogName, caption="Jon Snow. Mega ridiculous sword.",
                    embed="http://www.youtube.com/watch?v=40pUYLacrj4")

#Creating a video post from local file
client.create_video(blogName, caption="testing", data="/Users/johnb/testing/ok/blah.mov")

Editing a post

Updating a post requires you knowing what type a post you're updating. You'll be able to supply to the post any of the options given above for updates.

client.edit_post(blogName, id=post_id, type="text", title="Updated")
client.edit_post(blogName, id=post_id, type="photo", data="/Users/johnb/mega/awesome.jpg")

Reblogging a Post

Reblogging a post just requires knowing the post id and the reblog key, which is supplied in the JSON of any post object.

client.reblog(blogName, id=125356, reblog_key="reblog_key")

Deleting a post

Deleting just requires that you own the post and have the post id

client.delete_post(blogName, 123456) # Deletes your post :(

A note on tags: When passing tags, as params, please pass them as a list (not a comma-separated string):

client.create_text(blogName, tags=['hello', 'world'], ...)

Getting notes for a post

In order to get the notes for a post, you need to have the post id and the blog that it is on.

data = client.notes(blogName, id='123456')

The results include a timestamp you can use to make future calls.

data = client.notes(blogName, id='123456', before_timestamp=data["_links"]["next"]["query_params"]["before_timestamp"])

Tagged Methods

# get posts with a given tag
client.tagged(tag, **params)

Using the interactive console

This client comes with a nice interactive console to run you through the OAuth process, grab your tokens (and store them for future use).

You'll need pyyaml installed to run it, but then it's just:

$ python interactive-console.py

and away you go! Tokens are stored in ~/.tumblr and are also shared by other Tumblr API clients like the Ruby client.

Running tests

The tests (and coverage reports) are run with nose, like this:

python setup.py test

Author: tumblr
Source Code: https://github.com/tumblr/pytumblr
License: Apache-2.0 license

#python #api 

anita maity

anita maity

1620852450

Animated Circular progress bar using Html and CSS

In this article, I am going to show you how to create an animated circular progress bar using only HTML CSS and BoostApp programming code.
Animated circular Progress Bar is a type of statistical design used in a variety of websites. It is mainly used to indicate the percentage of one’s qualification in a portfolio website or personal website.

Download Source Code

#progress bar #circular progress bar #animated circular progress #dynamic progress bar in html

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

anita maity

anita maity

1621172164

Circular Progress Bar Using Html CSS and Bootstrap

How to create an animated circular progress bar using only HTML CSS and BoostApp programming code. I have designed many more types of animated progress bars before but this design has been designed in a completely modern way.

Animated circular Progress Bar is a type of statistical design used in a variety of websites. It is mainly used to indicate the percentage of one’s qualification in a portfolio website or personal website. It is fully animated, that is, under normal conditions, it has zero percent then it will gradually reach the pre-determined percentage. Different colors have been used to denote percentages.

Demo

video: https://www.youtube.com/watch?v=7PThu9_EP40

#circular progress bar #progress bar #animated circular progress bar #skill #progress

Lara Baldwin

Lara Baldwin

1629685124

How to Create a Circular Scroll Progress with HTML, CSS & JavaScript

In this tutorial, we'll learn how to create a circular scroll progress indicator with HTML, CSS & JavaScript. A scroll indicator denotes the percentage of a webpage that has been scrolled with HTML, CSS & JavaScript

For this tutorial, we create a circular scroll indicator that we will place in the bottom right corner of the webpage. The fill in indicator will correspond to the amount of page scrolled.

Project Folder Structure:

Let’s check out the project folder structure. We have a project folder called Scroll Percentage. Inside this folder, we have three files. The first is – index.html. The second is the stylesheet – style.css and the Third is the script script.js.

HTML:

Coming to the HTML section, copy the code below and paste it into your HTML section.
The HTML section consists of some demo text. Next, we have a div with id progress. Within this div, there is a span element with id progress-value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scroll Percentage</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="progress">
        <span id="progress-value"></span>
    </div>

    <h1>SCROLL PERCENTAGE</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam natus ex, molestias quis, aut veritatis similique exercitationem iure magni nobis iusto quaerat explicabo dolores et. Optio quis eum itaque deserunt, sapiente quasi asperiores, voluptatum doloribus aspernatur iusto vero velit tempora animi, labore hic corporis unde voluptates architecto odit ipsum neque laborum eius ea. Vitae error voluptatum tempore assumenda dolorum. Odit deserunt nihil saepe, ullam fuga minima eum, recusandae soluta atque autem porro expedita cum ipsum quasi sit quae dolorum reiciendis ducimus quia odio blanditiis provident dignissimos! Quas facilis dolorum assumenda voluptates dolores, cum tempora voluptatum non ducimus. Animi optio corrupti ipsam, corporis similique nostrum ea dolores aut perferendis minus rerum neque at sit veritatis eos cumque voluptas, velit dignissimos nam fugit. Possimus vel eius expedita a animi tempore pariatur molestiae quod accusantium totam doloremque repellendus incidunt dolorum reiciendis assumenda, in quaerat nisi corrupti culpa voluptas obcaecati, cupiditate itaque minima aspernatur! Sit, blanditiis quae, recusandae rerum quod soluta qui eaque sed, harum labore id tempore accusantium hic provident nisi libero odit ea distinctio aspernatur corrupti et sint odio. Ipsam suscipit nobis animi iure est minima assumenda inventore asperiores maiores iusto. Quibusdam eveniet enim dolore tenetur suscipit fuga, quod eum pariatur magni?</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima repellendus quas perferendis non corporis, quam saepe est suscipit tenetur sed placeat id qui enim ullam at, eius perspiciatis quisquam. Quisquam maiores ullam fuga libero esse ad alias dignissimos natus eum inventore adipisci nesciunt vero harum nihil, voluptatum magnam possimus voluptates dicta itaque, sequi accusantium, voluptatibus minima sit necessitatibus. Perspiciatis nam autem consectetur neque natus exercitationem expedita? Aut quaerat a quos, rem in consectetur modi pariatur, harum qui temporibus repellendus totam commodi enim mollitia! Magnam fugit eaque ex, vel pariatur soluta delectus? Eaque quisquam iusto inventore natus optio, asperiores voluptas consequuntur nostrum nesciunt quidem velit earum. Dolor, ratione eveniet optio quam, ipsum reiciendis eum delectus quasi omnis excepturi non unde quisquam soluta maiores et? Provident excepturi voluptatum quidem sunt et perspiciatis. Qui, error? Temporibus quae laudantium possimus minima id consequuntur iusto quo ea, nisi doloribus dignissimos hic voluptatibus, illum magni! Vero quia necessitatibus cupiditate vitae voluptatem minima fugiat, quas non atque porro. Tenetur, esse illo iure rem vel eum hic aliquam non explicabo officiis atque magni velit beatae expedita perspiciatis repellat.</p>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

CSS:

Next, we code the CSS section. Copy the code provided below and paste it into your stylesheet.

We apply some basic styles to the demo text. In the next step, we set the height and width of the progress div. We make it circular by adding a border radius of 50%. Also, we position it at a fixed place that is 25px from the bottom and 25px from the right. To make it stand out from the rest of the page we add some box shadow to it. Lastly, we centre the span element inside the progress by using the grid layout.

We set the display of progress-value to block. The progress-value span should be smaller than the progress div. Hence, we subtract 20px from the progress div.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
h1{
    color: #008fff;
    font-size: 15vmin;
    text-align: center;
    padding: 30px 0;
}
p{
    font-size: 3vmin;
    line-height: 2em;
    letter-spacing: 0.05em;
    text-align: justify;
    margin: 50px 0;
    padding: 0 30px;
}
#progress{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: fixed;
    bottom: 25px;
    right: 25px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    display: grid;
    place-items: center;
}
#progress-value{
    display: block;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background-color: #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 20px;
}

Javascript:

We add an on scroll event to the document window. When the document is scroll the scrollPercentage() is triggered.

We get the progress and progress-value element and assign them to variables. Further, we assign the scroll position from the top of the document to the pos variable. Now using the pos value we calculate the scroll value in terms of percentage.

We display its value inside the progress value. Also, we use this same value to fill the conic gradient. This way when you scroll it looks like the circular progress bar is getting filled. Your circular scroll progress indicator is now ready.

let scrollPercentage = () => {
    let scrollProgress = document.getElementById("progress");
    let progressValue = document.getElementById("progress-value");
    let pos = document.documentElement.scrollTop;
    let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrollValue = Math.round( pos * 100 / calcHeight);

    scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`;
    progressValue.textContent = `${scrollValue}%`;
}

window.onscroll = scrollPercentage;
window.onload = scrollPercentage;

📁 Download Source Code : https://codingartistweb.com

Subscribe: https://www.youtube.com/c/CodingArtist/featured 

#html #css #javascript