Как изменить ширину Bootstrap индикатора выполнения с помощью значения переменной {{$ percent}} в стиле Laravel?

Question

Я работаю над каким-то проектом, где я хочу показать ПРОЦЕНТ отметок, полученных с помощью индикатора выполнения.

У меня есть значение в процентах, и я хочу передать это значение в стиле: "width: {{$ percent} } "так, чтобы ширина индикатора выполнения изменялась в соответствии с полученными отметками, но это не работает. Вот мой код:

Пожалуйста, посмотрите, что $ процент находится в конце данных таблицы -> {{round ($ percent, 2)}}

<tr>
                                  <td>1</td>
                                  <td>{{$q->name}}</td>
                                  <td>{{$totalQuestions}}</td>
                                  <td>{{$attemptQuestions}}</td>
                                  <td>{{$userCorrectAnswer}}</td>
                                  <td>{{$userWrongAnswer}}</td>
                                  <td>{{round($percentage, 2)}}</td>
                                </tr>

                                @endforeach
                                
                              </tbody>
                            </table>

                            <p>
                                <strong>Percentage</strong> <span class="pull-right small muted">{{round($percentage, 2)}}</span>
                                
                            </p>

                             <div class="progress">

                        <div class="progress-bar" role="progressbar" aria-valuenow="{{$percentage}}" aria-valuemin="0" aria-valuemax="100" style="width : {{$percentage}}">
                              
                                <span class="sr-only">{{round($percentage, 2)}} Obtained</span>

                              </div>

введите описание изображения здесь

Answer 1

нужно добавить к стилю % вот так.

style="width : {{$percentage}}%"

Answer 2

Вы пробовали оставить div-индикатор выполнения без какого-либо содержимого? Попробуйте поместить за пределами div