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 + '%');

7 comments:

  1. I m getting NaN% in demo itself. please Repair that part of code..

    ReplyDelete
    Replies
    1. Thanks for your feedback. I fixed the issue. Before also its working in Chrome.

      Delete
  2. it shows only round plain circle

    ReplyDelete
    Replies
    1. have you disabled the javascript in browser ?

      Delete
    2. JavaScript works and i have the same problem

      Delete
  3. hi, you write #slice.gt50, .pie,.percent css class but in markup not shows this .is your markup complete?

    ReplyDelete
  4. if github download link available with documentation then pls share

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts