ProcessingStatusIndicator

Domain

UPLOADING / PROCESSING / READY / FAILED durumları için animasyonlu gösterge. İsteğe bağlı ilerleme çubuğu.

All states

Preview

Uploading 30%

Processing 65%

Ready 100%

Failed

Code

<%- include('modules/domain/common/status/ProcessingStatusIndicator', { status: 'UPLOADING',  progress: 30 }) %>
<%- include('modules/domain/common/status/ProcessingStatusIndicator', { status: 'PROCESSING', progress: 65 }) %>
<%- include('modules/domain/common/status/ProcessingStatusIndicator', { status: 'READY',      progress: 100 }) %>
<%- include('modules/domain/common/status/ProcessingStatusIndicator', { status: 'FAILED' }) %>

Custom label + sizes

Preview

Encoding video… 45%

Code

<%- include('modules/domain/common/status/ProcessingStatusIndicator', {
  status: 'PROCESSING', label: 'Encoding video…', progress: 45, size: 'lg'
}) %>

Source modules/domain/common/status/ProcessingStatusIndicator.ejs

<%
  var _status   = (locals.status   || '').toUpperCase();
  var _label    = locals.label     || null;
  var _progress = locals.progress  !== undefined ? locals.progress : null;
  var _size     = locals.size      || 'md';

  var statusMeta = {
    UPLOADING:  { label: 'Uploading',  icon: 'fa-solid fa-cloud-arrow-up', color: 'text-info',    pulse: true  },
    PROCESSING: { label: 'Processing', icon: 'fa-solid fa-gear',            color: 'text-warning', pulse: true  },
    READY:      { label: 'Ready',      icon: 'fa-solid fa-check',           color: 'text-success', pulse: false },
    FAILED:     { label: 'Failed',     icon: 'fa-solid fa-xmark',           color: 'text-error',   pulse: false },
  };
  var meta = statusMeta[_status] || { label: _status, icon: 'fa-solid fa-circle', color: 'text-text-secondary', pulse: false };

  var sizeMap = {
    sm: { text: 'text-xs', icon: 'text-sm', bar: 'h-1' },
    md: { text: 'text-sm', icon: 'text-base', bar: 'h-1.5' },
    lg: { text: 'text-base', icon: 'text-lg', bar: 'h-2' },
  };
  var s = sizeMap[_size] || sizeMap.md;

  var displayLabel = _label || meta.label;

  var barColor = {
    UPLOADING:  'bg-info',
    PROCESSING: 'bg-warning',
    READY:      'bg-success',
    FAILED:     'bg-error',
  }[_status] || 'bg-primary';

  var pct = _progress !== null ? Math.min(100, Math.max(0, _progress)) : 0;
%>

  
    
      
    
    <%= displayLabel %>
    <% if (_progress !== null) { %>
    <%= Math.round(_progress) %>%
    <% } %>
  

  <% if (_progress !== null) { %>
  
    
    
  
  <% } %>