How To Create onScroll Circular Progress Bar with show Percentage - using HTML CSS & Simple JavaScript

<style>/*<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=90563a3a-b8d3-4436-a3cf-a486fe79cacf' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=90563a3a-b8d3-4436-a3cf-a486fe79cacf' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1633184471074840&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-1633184471074840 -->

</head>--></head><body data-lang='default' data-theme='default' id='nB'>*/</style>

Circular Progress Bar with show Percentage

Circular Progress Bar

Learn How To Create A Circular Progress Bar with show Percentage to your web page to inform readers how much they have read from your article or to indicate how much page has been scrolled.

Circular progress bars are a staple of web development. It’s one of those little minor details that can immensely impact a user’s experience and flow.

About this Script

Author: Anutrickz
Created on: 30-05-22
Made with: HTML, CSS, JS

How to create jQuery Circular Progress Bar with Percentage

In HTML, create a div element with a id name “ATprogressbar”. Similarly, create another div tag inside it with a id name “progressValue” . The complete HTML structure for the circular progress bar is as follows:
After that, style your circular progress bar with CSS.
Then we add JS Function for progress bar & to show percentage.

Watch tutorials & Download Source

Summary

By having a read / scroll progress bar, readers can be better informed of how much they have read and how much remains for an article which definitely make a website more user friendly.

AD

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/552934507-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7EZKh4xkCkdK8UmBNCGlJ-mUtTIQ:1757544579367';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2059347577744616049','//anutrickz.blogspot.com/2022/05/page-scroll-progress-indicator.html','2059347577744616049');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2059347577744616049', 'title': 'ANUTRICKZ', 'url': 'https://anutrickz.blogspot.com/2022/05/page-scroll-progress-indicator.html', 'canonicalUrl': 'https://anutrickz.blogspot.com/2022/05/page-scroll-progress-indicator.html', 'homepageUrl': 'https://anutrickz.blogspot.com/', 'searchUrl': 'https://anutrickz.blogspot.com/search', 'canonicalHomepageUrl': 'https://anutrickz.blogspot.com/', 'blogspotFaviconUrl': 'https://anutrickz.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-TS2WXBJ1XV', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ANUTRICKZ - RSS\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2059347577744616049/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/1413504531081908985/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1633184471074840', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/df4e7af2431b8786', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Continue Reading \xbb', 'pageType': 'item', 'postId': '1413504531081908985', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTAoEQFVMpFwPvuL8C44paj5erIVq56iVPyUkUZ6nIxRhS8jVgJbgooIGu0rouIAXYM59-XZCqintRqchpx3eYzJKRcu725I9rcAeCJKlIcjiKYle3mE8b_kxTV5wiX6A4mrs9HfhcRuFqpshXeDCidARn1n8WrAx4slgEbbL7tYGSvKQ8wZ4cfB2-/s72-w640-c-h360/pagescroll%20circular%20progressbar.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTAoEQFVMpFwPvuL8C44paj5erIVq56iVPyUkUZ6nIxRhS8jVgJbgooIGu0rouIAXYM59-XZCqintRqchpx3eYzJKRcu725I9rcAeCJKlIcjiKYle3mE8b_kxTV5wiX6A4mrs9HfhcRuFqpshXeDCidARn1n8WrAx4slgEbbL7tYGSvKQ8wZ4cfB2-/w640-h360/pagescroll%20circular%20progressbar.jpg', 'pageName': 'How To Create onScroll Circular Progress Bar with show Percentage - using HTML CSS \x26 Simple JavaScript', 'pageTitle': 'ANUTRICKZ: How To Create onScroll Circular Progress Bar with show Percentage - using HTML CSS \x26 Simple JavaScript', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How To Create onScroll Circular Progress Bar with show Percentage - using HTML CSS \x26 Simple JavaScript', 'description': 'Wordpress theme and plugin, seo for blogger, blogger theme blogging tips 2024, html, css , jQuery, javascript, How to,code.Tutorials', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTAoEQFVMpFwPvuL8C44paj5erIVq56iVPyUkUZ6nIxRhS8jVgJbgooIGu0rouIAXYM59-XZCqintRqchpx3eYzJKRcu725I9rcAeCJKlIcjiKYle3mE8b_kxTV5wiX6A4mrs9HfhcRuFqpshXeDCidARn1n8WrAx4slgEbbL7tYGSvKQ8wZ4cfB2-/w640-h360/pagescroll%20circular%20progressbar.jpg', 'url': 'https://anutrickz.blogspot.com/2022/05/page-scroll-progress-indicator.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 1413504531081908985}}, {'name': 'widgets', 'data': [{'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'content', 'id': 'Blog1', 'posts': [{'id': '1413504531081908985', 'title': 'How To Create onScroll Circular Progress Bar with show Percentage - using HTML CSS \x26 Simple JavaScript', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTAoEQFVMpFwPvuL8C44paj5erIVq56iVPyUkUZ6nIxRhS8jVgJbgooIGu0rouIAXYM59-XZCqintRqchpx3eYzJKRcu725I9rcAeCJKlIcjiKYle3mE8b_kxTV5wiX6A4mrs9HfhcRuFqpshXeDCidARn1n8WrAx4slgEbbL7tYGSvKQ8wZ4cfB2-/w640-h360/pagescroll%20circular%20progressbar.jpg', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'author', 'label': 'by'}, {'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'author', 'label': 'by'}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}]}]);
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'content', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
</script>
</body>