HT001 and HT002 shortlisted circle

cmsWebApp/webroot/css/common.css

@@ -2286,14 +2286,20 @@ a.forgot-pass {
 .ja-icon{
     display: table-cell;
     width: 39px;
+    vertical-align: middle;
 }
-.ja-icon span{
-    border-style: solid;
-    border-width: 6px;
-    border-image-source: conic-gradient(#e5e8eb, #e5e8eb 58%, #03a0e7, #e5e8eb);
-    border-image-slice: 1;
+.ja-icon .conic-circle{
     width: 40px;
     height: 41px;
+    position: relative;
+}
+.right-mark-img {		
+    position: absolute;		
+    top: 16px;		
+    left: 0;		
+    right: 0;		
+    margin: 0 auto;		
+    bottom: 0;		
 }
 .active-states{
     width: 16px;

cmsWebApp/webroot/extensions/adminportal/inc/job_list.jsp

@@ -17,6 +17,16 @@
        
         $(document).ready(function() 
         {
+            $('.conic-circle').percentageLoader({		
+                valElement: 'p',		
+                strokeWidth: 6,		
+                bgColor: '#e5e8eb',		
+                ringColor: '#03a0e7',		
+                textColor: '#03a0e7',		
+                fontSize: '0px',		
+                fontWeight: 'normal'		
+            });	
+            
             $(".job-row").click(function() 
             {
                 var id  = $(this).closest('.job-list').attr('id');
@@ -35,6 +45,7 @@
     <%
         for(Job job: jobs)
         {
+            int shortlisted =   job.getNoOfCandidatesShortlisted();
     %>
             <div class="job-list"   id="<%= job.getID() %>">
                 <div class="job-row"   >
@@ -59,9 +70,23 @@
                         </div>
                     </div>
                     <div class="job-shortlisted jl-c eq-second-height" style="height: 107px;">
-                        <div class="ja-icon"><img src="images/circle.png"></div>
+                        <div class="ja-icon">
+                            <div class="conic-circle">
+                                <p style="display:none;">
+                                    <oneit:toString value="<%= shortlisted * 20 %>"   mode="PercentageWholeNumber" />
+                                </p>
+                                <%
+                                    if(shortlisted == 5)
+                                    {
+                                %>
+                                        <img src="images/persan-loader-right.png" class="right-mark-img" />
+                                <%
+                                    }
+                                %>
+                            </div>
+                        </div>
                         <div class="ja-count">
-                            <oneit:toString value="<%= job.getNoOfCandidatesShortlisted() %>"   mode="EscapeHTML"   nullValue="0"/>/5
+                            <oneit:toString value="<%= shortlisted %>"   mode="EscapeHTML"   nullValue="0"/>/5
                             <span class="grey-span">shortlisted</span>
                         </div>
                     </div>

cmsWebApp/webroot/inc/std_imports.jsp

@@ -19,6 +19,7 @@
     <oneit:script src="/scripts/recalc.js" />
     <oneit:script src="/scripts/jquery.circleProgressBar.min.js"/>
     <oneit:script src="/scripts/slick.min.js"/>
+    <oneit:script src="/scripts/raphael-min.js"/>
 </oneit:script>
 
 <script>