Uikit Progress bar on Uikit Table

Question

I have problem putting a uikit progress bar inside a uikit table cell, i have searched for getuikit for progress bar and table documentation I googled everything but found no any good community or resources out there.

Here is my simplified html file for table:

<table class="uk-table uk-table-hover uk-overflow-container">
    <thead>
        <tr>
            <th>
                Employee
            </th>
            <th>
                <label class="uk-form-label" for="name" style="font-weight: lighter;">
                    Contact
                </label>
            </th>
            <th>
                Workplace/Position
            </th>
            <th>
                Status
            </th>
            <th>
                Work Completed (%)
            </th>
    </thead>
    <tbody>
        <tr>
            <td>Luigi Lascuña</td>
            <td>[email protected]</td>
            <td>Main Office/General Manager</td>
            <td>Regular</td>
            <td class="uk-progress">
                <div class="uk-progress-bar" style="width: 40%;">40%</div>
            </td>
        </tr>
    </tbody>
</table>

Here is my output:

There result will only display the 40% text inside a table cell but not just like in the documentation.

Answer 1

I just include the components/progress.css to my styles block in the head of the main html file. This solved my problem!