LoadingState

App

İskelet yükleme animasyonları. spinner / table / cards / list / detail / form variant'ları.

Spinner

Preview

Code

<%- include('modules/app/LoadingState', { variant: 'spinner' }) %>

Table skeleton

Preview

Code

<%- include('modules/app/LoadingState', { variant: 'table', rows: 5, cols: 4 }) %>

Cards skeleton

Preview

Code

<%- include('modules/app/LoadingState', { variant: 'cards', cards: 3 }) %>

List skeleton

Preview

Code

<%- include('modules/app/LoadingState', { variant: 'list', rows: 4 }) %>

Form skeleton

Preview

Code

<%- include('modules/app/LoadingState', { variant: 'form', rows: 3 }) %>

Source modules/app/LoadingState.ejs

<%
  var _variant = locals.variant || 'spinner';
  var _rows    = locals.rows    || 5;
  var _cols    = locals.cols    || 4;
  var _cards   = locals.cards   || 3;
%>

<% if (_variant === 'spinner') { %>

  <%- include('../ui/Spinner', { size: 'lg' }) %>


<% } else if (_variant === 'table') { %>

  
        <% for(var c=0;c<_cols;c++) { %><% } %>
      
      <% for(var r=0;r<_rows;r++) { %>
      
        <% for(var c=0;c<_cols;c++) { %>
        
        <% } %>
      
      <% } %>
    
    
      
    
    
  


<% } else if (_variant === 'cards') { %>

  <% for(var i=0;i<_cards;i++) { %>
  
    
    
    
    
  
  <% } %>


<% } else if (_variant === 'list') { %>

  <% for(var i=0;i<_rows;i++) { %>
  
    
    
      
      
    
    
  
  <% } %>


<% } else if (_variant === 'detail') { %>

  
    
    
    
      
      
      
    
  
  
    <% for(var i=0;i<4;i++) { %>
    
      
      
    
    <% } %>
  
  
    <% for(var i=0;i<4;i++) { %><% } %>
    
  


<% } else if (_variant === 'form') { %>

  <% for(var i=0;i<_rows;i++) { %>
  
    
    
  
  <% } %>
  
    
    
  

<% } %>