Szukam progressbar'u w kształcie koła

[MsPatryk]

Cześć mam pytanie: zna ktoś jakiś progressbar który jest okrągły i działa? testowałem chyba wszystkie [z dodatkami i bez] i nic nie dziala np: http://jsfiddle.net/Aapn8/3410/

Jeśli ma ktoś dwuczłonowy [dwa bossbary- jeden w drugim ale mniejszy] to też prosze podać :/ Próbowałem wgrać np ten co podałem i nie dziala tzn nie wyświetla nic

[IZZER4]

A moze powiesz co ci w nim nie dziala?

Bo to co podales dziala w 100%.

[MsPatryk]

"Próbowałem wgrać np ten co podałem i nie dziala tzn nie wyświetla nic" :VVV

[IZZER4]

Jak to "wgrywales"?

Zapodaj kod.

[MsPatryk]

wgralem wszytko z tego linku co podalem

[Fennec]

@MsPatryk ale jak wgrałeś? Dodałeś to co w HTML do HTML, do CSS to do CSS, a do javascript to dałeś w <script>­? Daj nam kod to zobaczymy, coś może źle napisałeś/przekopiowałeś?

[MsPatryk]

 

<style>
#container {
  width: 100px;
  height: 100px;
}
</style>
<script>
var circle = new ProgressBar.Circle('#container', {
  color: '#FCB03C'
});

circle.animate(1.0);  // Number from 0.0 to 1.0
</script>
<div id="container"></div>

a i jak usune width to pokazuje sie ale na cala strone

[IZZER4]

javascript na koniec bo jak ma znalesc div skoro go jeszcze nie ma..

Juz nie mowiac ze to calkowicie co innego jak w linku co podales.

[MsPatryk]

@up pisalem ze testowalem sporo progressbarów

edit: wie ktoś jak zmienic % co jakis czas? tzn jak jest 1.0 cale kolo, a wartosc ta zmienia sie caly czas to jak zrobic aby div tez sie zmienial

[IZZER4]

Przez js edytuj data-percent=".

[MsPatryk]

tylko jak to co 1s odwsierzyc ?

[IZZER4]

settimeout?

[Igorqqq]

CSS:

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

HTML:

<div id="loader-wrapper">
    <div id="loader"></div>
</div>

Myślę, że pomogłem.