Przeszukałem tę witrynę, aby znaleźć paski postępu, ale te, które udało mi się znaleźć, pokazują animowane kręgi, które sięgają w 100%.
Chciałbym, aby zatrzymywał się w określonych procentach, jak na zrzucie ekranu poniżej. Czy mogę to zrobić używając tylko CSS?
html
css
progress-bar
progress
css-shapes
Adam GunShy powiedział
źródło
źródło
Odpowiedzi:
Stworzyłem poradnik, jak to zrobić z CSS3 i biblioteką LESS JavaScript. Możesz znaleźć post na blogu tutaj: https://medium.com/secoya-tech/a917b80c43f9
Oto jsFiddle końcowego wyniku. Procent jest ustawiany za pomocą
data-progress
atrybutu. Zmiany są animowane przy użyciu przejść CSS.źródło
outline: 1px solid transparent;
do.mask, .fill, .shadow
grupy.Stworzyłem skrzypce używając tylko CSS .
Sprawdź także to skrzypce tutaj (tylko CSS)
Lub ten piękny okrągły pasek postępu z HTML5, CSS3 i JavaScript.
źródło
clip
jest teraz przestarzały.Co z tym?
HTML
Javascript
i CSS
http://jsfiddle.net/Aapn8/3410/
Podstawowy kod pochodzi z Simple PIE Chart http://rendro.github.io/easy-pie-chart/
źródło
Kolejne rozwiązanie oparte na czystym CSS, które opiera się na dwóch przyciętych, zaokrąglonych elementach, które obracam, aby uzyskać odpowiedni kąt:
http://jsfiddle.net/maayan/byT76/
To podstawowy css, który to umożliwia:
a js obraca go zgodnie z wymaganiami.
dość łatwe do zrozumienia ...
Mam nadzieję, że to pomoże, Maayan
źródło
-vendor-prefixes
wnętrza.css()
♪ Używaj tylkotransform: 'rotate(' + degree + 'deg)'