Circular Progress Display is pretty good style to show the progress for Image Uploading and for Voting System. In this article you can find the CSS and jQuery code to build Circular Progress.
Markup :
<div class="cprogress" id="showProgress"></div>
CSS :
.cprogress { display: inline-block; position: relative; width: 1em; height: 1em; text-align: -webkit-match-parent; font-size: 321px; cursor: default; } .cprogress:before { content: ''; display: block; position: absolute; width: 1em; height: 1em; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; opacity: .5; z-index: 0; background: #df6c4f; } .cprogress:after { content: ''; display: block; position: absolute; top: .1em; left: .1em; width: .8em; height: .8em; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; z-index: 1; } .cprogress>#slice.gt50 { clip: rect(auto, auto, auto, auto); } .cprogress>#slice { position: absolute; width: 1em; height: 1em; clip: rect(0px, 1em, 1em, 0.5em); } .cprogress>#slice>.pie { position: absolute; border: .1em solid #df6c4f; width: .8em; height: .8em; clip: rect(0em, 0.5em, 1em, 0em); border-radius: .5em; } .cprogress>#slice>.pie.fill { -moz-transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; -o-transform: rotate(180deg) !important; transform: rotate(180deg) !important; } .percent { font-size: 81px; position: absolute; text-align: center; padding: 1em 0.5em 1em 0.5em; width: 2.35em; top: 0.41em; left: 0.41em; background: rgb(245, 245, 245); border-radius: 2.35em; font-weight: normal; width: 176px; }
Script :
$('#showProgress').html( '<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>'); var deg = 360 / 100 * percent; $('#showProgress #slice .pie').css({ '-moz-transform' : 'rotate(' + deg + 'deg)', '-webkit-transform' : 'rotate(' + deg + 'deg)', '-o-transform' : 'rotate(' + deg + 'deg)', 'transform' : 'rotate(' + deg + 'deg)' }); $('#showProgress .percent').text(''+percent + '%');
I m getting NaN% in demo itself. please Repair that part of code..
ReplyDeleteThanks for your feedback. I fixed the issue. Before also its working in Chrome.
Deleteit shows only round plain circle
ReplyDeletehave you disabled the javascript in browser ?
DeleteJavaScript works and i have the same problem
Deletehi, you write #slice.gt50, .pie,.percent css class but in markup not shows this .is your markup complete?
ReplyDeleteif github download link available with documentation then pls share
ReplyDeleteI want to always read your blogs. I love them Are you also searching for Nursing capstone Writing Help? we are the best solution for you. We are best known for delivering Nursing capstone writing services to students without having to break the bank
ReplyDelete