Круглый прогресс бар

[Temiks]

Здравствуйте. Возникло две проблемы с круглым прогресс баром.

Первая проблема:
Как в коде js нужно изменить строчку, что бы значения процентов присваивалось уникальному классу?

$(document).ready(function () {    progressBarUpdate(23, 100);});

Сейчас вот так:

а нужно вот так (не понятно только с процентом):

 

Пробовал сделать так - не получилось

$(".pie1").ready(function () {    progressBarUpdate(23, 100);});$(".pie2").ready(function () {    progressBarUpdate(78, 100);});

 

Вторая проблема:
Как сделать вывод процентов так, что бы цифра была в div'e(как сейчас), а вот сам процент был в span?

$(".status").html(x + "%");

--

Код можно посмотреть тут: jsfiddle

[hypnocolor]

Видимо, как-то так: http://jsfiddle.net/hypnocolor/byT76/108/. По крайней мере, по части отдельного спана для знака процентов и уникальных классов. А вот если задавать больше 50%, полоска перестаёт работать, как надо. По крайней мере в хроме. Полпятого утра, лень с этим разбираться)

Edited August 25, 2014 by hypnocolor

[Temiks]

Видимо, как-то так: http://jsfiddle.net/hypnocolor/byT76/108/. По крайней мере, по части отдельного спана для знака процентов и уникальных классов. А вот если задавать больше 50%, полоска перестаёт работать, как надо. По крайней мере в хроме. Полпятого утра, лень с этим разбираться)

Спасибо большое!

А по поводу полоски, пропустил ноль в высоте блока slice2

[Riko_s]

Здравствуйте. Возникло две проблемы с круглым прогресс баром.

Первая проблема:

Как в коде js нужно изменить строчку, что бы значения процентов присваивалось уникальному классу?

$(document).ready(function () {    progressBarUpdate(23, 100);});

Сейчас вот так:

а нужно вот так (не понятно только с процентом):

 

Пробовал сделать так - не получилось

$(".pie1").ready(function () {    progressBarUpdate(23, 100);});$(".pie2").ready(function () {    progressBarUpdate(78, 100);});

 

Вторая проблема:

Как сделать вывод процентов так, что бы цифра была в div'e(как сейчас), а вот сам процент был в span?

$(".status").html(x + "%");

--

Код можно посмотреть тут: jsfiddle

 

 

Видимо, как-то так: http://jsfiddle.net/hypnocolor/byT76/108/. По крайней мере, по части отдельного спана для знака процентов и уникальных классов. А вот если задавать больше 50%, полоска перестаёт работать, как надо. По крайней мере в хроме. Полпятого утра, лень с этим разбираться)

 

Ребятки, красивый прогрессбар! Хотел забрать себе, но в коде что синул hypnocolor что-то не так с отображением полосы заполнения!

http://s1.hostingkartinok.com/uploads/images/2015/04/7aad9e1ca1b5289375859b8ab0698e25.png

Пожалуйста, помогите исправить! Срочно надо!

[afdw]

 

Здравствуйте. Возникло две проблемы с круглым прогресс баром.

Первая проблема:

Как в коде js нужно изменить строчку, что бы значения процентов присваивалось уникальному классу?

$(document).ready(function () {    progressBarUpdate(23, 100);});

Сейчас вот так:

а нужно вот так (не понятно только с процентом):

 

Пробовал сделать так - не получилось

$(".pie1").ready(function () {    progressBarUpdate(23, 100);});$(".pie2").ready(function () {    progressBarUpdate(78, 100);});

 

Вторая проблема:

Как сделать вывод процентов так, что бы цифра была в div'e(как сейчас), а вот сам процент был в span?

$(".status").html(x + "%");

--

Код можно посмотреть тут: jsfiddle

 

 

Видимо, как-то так: http://jsfiddle.net/hypnocolor/byT76/108/. По крайней мере, по части отдельного спана для знака процентов и уникальных классов. А вот если задавать больше 50%, полоска перестаёт работать, как надо. По крайней мере в хроме. Полпятого утра, лень с этим разбираться)

 

Ребятки, красивый прогрессбар! Хотел забрать себе, но в коде что синул hypnocolor что-то не так с отображением полосы заполнения!

http://s1.hostingkartinok.com/uploads/images/2015/04/7aad9e1ca1b5289375859b8ab0698e25.png

Пожалуйста, помогите исправить! Срочно надо!

 

http://jsfiddle.net/byT76/228/

Ошибка была в CSS.

[Riko_s]

 

 

Здравствуйте. Возникло две проблемы с круглым прогресс баром.

Первая проблема:

Как в коде js нужно изменить строчку, что бы значения процентов присваивалось уникальному классу?

$(document).ready(function () {    progressBarUpdate(23, 100);});

Сейчас вот так:

а нужно вот так (не понятно только с процентом):

 

Пробовал сделать так - не получилось

$(".pie1").ready(function () {    progressBarUpdate(23, 100);});$(".pie2").ready(function () {    progressBarUpdate(78, 100);});

 

Вторая проблема:

Как сделать вывод процентов так, что бы цифра была в div'e(как сейчас), а вот сам процент был в span?

$(".status").html(x + "%");

--

Код можно посмотреть тут: jsfiddle

 

 

Видимо, как-то так: http://jsfiddle.net/hypnocolor/byT76/108/. По крайней мере, по части отдельного спана для знака процентов и уникальных классов. А вот если задавать больше 50%, полоска перестаёт работать, как надо. По крайней мере в хроме. Полпятого утра, лень с этим разбираться)

 

Ребятки, красивый прогрессбар! Хотел забрать себе, но в коде что синул hypnocolor что-то не так с отображением полосы заполнения!

http://s1.hostingkartinok.com/uploads/images/2015/04/7aad9e1ca1b5289375859b8ab0698e25.png

Пожалуйста, помогите исправить! Срочно надо!

 

http://jsfiddle.net/byT76/228/

Ошибка была в CSS.

 

Спасибо!

[Riko_s]

 

 

Здравствуйте. Возникло две проблемы с круглым прогресс баром.

Первая проблема:

Как в коде js нужно изменить строчку, что бы значения процентов присваивалось уникальному классу?

$(document).ready(function () {    progressBarUpdate(23, 100);});

Сейчас вот так:

а нужно вот так (не понятно только с процентом):

 

Пробовал сделать так - не получилось

$(".pie1").ready(function () {    progressBarUpdate(23, 100);});$(".pie2").ready(function () {    progressBarUpdate(78, 100);});

 

Вторая проблема:

Как сделать вывод процентов так, что бы цифра была в div'e(как сейчас), а вот сам процент был в span?

$(".status").html(x + "%");

--

Код можно посмотреть тут: jsfiddle

 

 

Видимо, как-то так: http://jsfiddle.net/hypnocolor/byT76/108/. По крайней мере, по части отдельного спана для знака процентов и уникальных классов. А вот если задавать больше 50%, полоска перестаёт работать, как надо. По крайней мере в хроме. Полпятого утра, лень с этим разбираться)

 

Ребятки, красивый прогрессбар! Хотел забрать себе, но в коде что синул hypnocolor что-то не так с отображением полосы заполнения!

http://s1.hostingkartinok.com/uploads/images/2015/04/7aad9e1ca1b5289375859b8ab0698e25.png

Пожалуйста, помогите исправить! Срочно надо!

 

http://jsfiddle.net/byT76/228/

Ошибка была в CSS.

 

good. thanks

Edited October 10, 2015 by Riko_s

[Николя223]

У бутстрапа есть фишка - ко всему добавляет box-sizing: border-box;

Вам нужно для всех элементов прогресс бара проставить box-sizing: content-box;

Или же настроить размеры под данный бокс сайзинг

[papay]

Ребят, кто-нибудь может объснить ксс верстку подобных прогресс баров, желательно подробней, ппц у меня тупка особенно с синим фоном заполнения. В частотности так же интересует как сделать такой

 

Edited November 13, 2015 by papay

[Igor Schnaider]

Ребят, кто-нибудь может объснить ксс верстку подобных прогресс баров, желательно подробней, ппц у меня тупка особенно с синим фоном заполнения. В частотности так же интересует как сделать такой

 

Такие штуки лучше с помощью SVG делать. Но можно на CSS попробовать.

Вот отличная статья про всякие такие диаграммы.

Ну и я быстро набросал ваш пример с помощью одного из методов: http://codepen.io/anon/pen/ojJRVb?editors=110

Edited November 14, 2015 by Igor Schnaider