рейтингов бар CSS

Question

Я создаю бар рейтингов для моего сайта и у меня есть несколько вопросов Here is the link for the codepen so you can see what I have so far.

что мне нужно иметь два разных цветов для лайковой (зеленый) и антипатий (красной). Как я могу отделить эти два и поделиться им с баром. Так немного как рейтинг бар на YouTube

и второго вопрос

Я использую Rails (не рельсы специальных знаний, необходимых для ответа на этот вопрос) мой код для подобий будет <%= @movies.likes.size %> (т.е. 5000) и антипатии <%= @movies.dislikes.size %> (т. Е. 3000), используя такое большое число для ширины% wont work. Как я могу proportionalize его под планку Благодаря

Answer 1

Для расчета доли подобных бы:

100*likes/(likes+dislikes) 

Что касается первого вопроса, то почему ты не мог просто установить цвет фона. метр-тонкий, чтобы быть красным, например?

Answer 2

Измените фоновый цвет на .meter-slim на цвет, который хотите для неприязни, и измените фоновый цвет на .meter-slim .purple на нужный вам цвет (зеленый в вашем примере).

Вы также можете изменить название этого класса от фиолетового до другого (возможно, зеленого) в обоих местах.

Тогда за процент (где 85% находится в вашем примере), используйте 100 * любит/(любит + антипатии)

EDIT: Я думал, что я хотел бы добавить к этому на основе наших комментариев ниже ,

Как я уже упоминал, я несколько раз экспериментировал с Ruby, и это было десять лет назад, поэтому моя память слаба.

Моя идея положить все в <%= %> была основана на ваших отрывках в вопросе. Лучшим подходом, который я должен был бы предложить сразу, было бы создание переменной для процента upvotes (назовем ее percent_upvotes), а затем просто используйте "width: <%= @percent_upvotes %>%" в вашем представлении.

Итак, вам нужно рассчитать это значение и сохранить его в процентах. Один из способов заключается в том, чтобы вытащить процент голосов от голосов в вашем выражении SQL. Я не знаю вашу схему, но это было бы что-то вроде ...

SELECT (upvotes/votes) AS percent_upvotes FROM your_table  

Или в вашем Руби ...

percent_upvotes = (movies.upvotes.size.to_f/movies.votes.size.to_f) * 100.0 

Answer 3

Некоторые CSS Frameworks содержат Bars CSS Прогресс изначально.

Чтобы назвать несколько:

• Twitter Bootstrap http://twitter.github.io/bootstrap/components.html#progress
• Zurb Фонд http://foundation.zurb.com/docs/components/progress-bars.html

и некоторые CSS ресурсы:

• CSS3 Progress Bars from CSS Tricks