How to develop Progress Bar in Oracle Apex (Bootstrap)

Bootstrap Progress Bar

1. 
--CSS INLINE

.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width .6s ease;
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #cfdae4;
    border-radius: .25rem;
}

--	COLUMN HTML EXPRESSION
2.
<span>
<div class="progress" style="height:20px;">
<div class="progress-bar" style="width:#Colum_Name#%">#Colum_Name#% </div>
</div>
</span>
 
 --COLUMN CALL BY FUNCTION
 3.
 create or replace function progress_bar(p_value in number)
 return varchar2 IS
 l_height number:=20;
 
 begin  
 return '<span>
<div class="progress" style="height:'||l_height||'px;">
 <div class="progress-bar" style="width:'||p_value||'%">'||p_value||'% 
 </div>
 </div>
 </span>';
 end ;
 
 
 -- CALL FUNCTION FROM REPORT QUERY
 4.
 
 SELECT progress_bar(Colum_Name) FROM table;