Настройка индикатора выполнения в div с помощью jQuery

Question

Я хочу настроить индикатор выполнения, созданный в файле javascript, на мой файл html, и я использую тему Metroni c. Я хочу поместить индикатор выполнения в красную область, как показано на рисунке. Мне нужно поместить мой индикатор в мою таблицу. Я использовал

<div class="progress progress-sm"><div class="progress-bar kt-bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"</div></div>

, но это не сработало. Как я могу решить это? Кто-нибудь может помочь с этим?

Заранее спасибо.

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

Мои коды указаны ниже:

шт. js

'use strict';
 var KTDatatablee = function () {

var Kategorii = function () {

    var datatable = $('.datatable').KTDatatable({

        data: {
            type: 'remote',
            source: {
                read: {
                    url: 'Kategori',
                },
            },
            pageSize: 10, // display 20 records per page
            serverPaging: false,
            serverFiltering: false,
            serverSorting: true,
        },
        // layout definition
        layout: {
            scroll: true,
            height: 400,
            footer: false,
        },

        // column sorting
        sortable: true,

        pagination: false,

        detail: {
            title: 'Load sub table',
            content: subTableInit,
        },

        search: {
            input: $('#generalSearch'),
        },
        // columns definition
        columns: [
            {
                field: 'Piece',
                title: '',
                sortable: false,
                width: 30,

            }, {
                field: 'PieceName',
                title: 'Piece Name',
                sortable: 'asc',
            },
        ],
    });
    $('#kt_form_status').on('change', function () {
        datatable.search($(this).val().toLowerCase(), 'PieceName');
    });
    $('#kt_form_type').on('change', function () {
        datatable.search($(this).val().toLowerCase(), 'Type');
    });
    $('#kt_form_status,#kt_form_type').selectpicker();

    function subTableInit(e) {
        $('<div/>').attr('id', 'child_data_ajax_' + e.data.Piece).appendTo(e.detailCell).KTDatatable({
            data: {
                type: 'remote',
                source: {
                    read: {
                        url: 'AltKategori',
                        params: {
                            // custom query params
                            query: {
                                generalSearch: '',
                                PieceID: e.data.Piece,
                            },
                        },
                    },
                },
                pageSize: 10,
                responsive: true,
                serverPaging: false,
                serverFiltering: false,
                serverSorting: true,
            },
            detail: {
                title: 'Load sub table',
                content: subTableInitt,
            },
            // layout definition
            layout: {
                scroll: true,
                height: 300,
                footer: false,
                // enable/disable datatable spinner.
                spinner: {
                    type: 1,
                    theme: 'default',
                },
            },
            sortable: true,
            // columns definition
            columns: [
                {
                    field: '',
                    title: '#',
                    sortable: false,
                    width: 10,
                }, {
                    field: 'SubPieceId',
                    title: 'ID',
                }, {
                    field: 'SubPieceName',
                    title: 'Parça Adı',
                }, {
                    field: 'Count',
                    title: 'Kullanılan Parça',
                }, {
                    field: 'TotalCount',
                    title: 'Takım Ömrü',
                },
                {
                    field: 'Date',
                    title: 'Eklenme Tarihi',
                }],

        });

    }

    function subTableInitt(a) {

    }
};

return {
    // Public functions
    init: function () {
        // init dmeo
        Kategorii();
    },
};
}();
jQuery(document).ready(function () {
KTDatatablee.init();
});

.cs html

<div class="datatable" id="child_data_ajax">

</div>

Контроллер

       public ActionResult Kategori()
    {
        TakimOmruEntities db = new TakimOmruEntities();
        var Kategorii = db.Piece.ToList();
        return Json(
        new
        {
            data = from obj in Kategorii
                   select new
                   {
                       Piece = obj.PieceId,
                       PieceName = obj.PieceName.ToString(),

                   }
        }, JsonRequestBehavior.AllowGet);


    }
    public ActionResult AltKategori()
    {
        TakimOmruEntities db = new TakimOmruEntities();


        var Kategorii = db.SubPiece.ToList();
        return Json(
        new
        {
            data = from obj in Kategorii
                   select new
                   {
                       SubPieceId = obj.SubPieceId,
                       SubPieceName = obj.SubPieceName.ToString(),
                       Count = obj.Count,
                       TotalCount = obj.TotalCount,
                       Date = obj.TodayDate.Value.ToString("dd.MM.yyyy"),
                       PieceID = obj.PieceID
                   }
        }, JsonRequestBehavior.AllowGet);

    }

Индикатор выполнения

<div class="progress progress-sm"><div class="progress-bar kt-bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"</div></div>