0

the main problem is with the container of the percentage (the small circle), instead i can create the big one with easy pie chart plugin...

Any idea which i can follow please ??!

enter image description here

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
kach
  • 799
  • 3
  • 13
  • 23

1 Answers1

1

Well, I've took the code for the motion pie from here(please upvote his answer if you liked the pie)... And I've added mine for the Green Percentage circle, which I am hiding on load using opacity: 0; and showing after 3 seconds using animation-delay property and lastly I added animation-fill-mode property, so that your percentage div doesn't disappear..

Demo

.percent {
    -webkit-animation: show_percent 1s;
    -moz-animation: show_percent 1s;
    animation: show_percent 1s;
    opacity: 0;
    -moz-animation-delay: 3s;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;

    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    height: 50px;
    width: 50px;
    background: #00FF43;
    border-radius: 50%;
    z-index: 50;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
@-moz-keyframes show_percent {
    0% {
        display: none;
    }
    100% {
        display: block;
    }
}

@-webkit-keyframes show_percent {
    0% {
        display: none;
    }
    100% {
        display: block;
    }
}

@keyframes show_percent {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
Community
  • 1
  • 1
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • thanx Mr..... but the idea is that the Green Percentage circle should move while the blue bar moves, i mean it must stuck on the head of the bar, ust to make it clear for you, this is a preloader of a page :) – kach Dec 23 '13 at 17:48
  • @kach well, you didn't described much in your question so just threw a demo :) – Mr. Alien Dec 23 '13 at 18:08