• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <link rel="preconnect" href="https://fonts.gstatic.com">
    8.   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    9.   <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    10.   <script nonce="undefined" src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    11.   <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    12.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    13.   <style>
    14.     * {
    15.       --md-red: #f44336;
    16.       --md-orange: #ff9800;
    17.       --md-yellow: #ffeb3b;
    18.       --md-green: #4caf50;
    19.       --md-blue: #2196f3;
    20.       --md-purple: #673ab7;
    21.       --md-indigo: #3f51b5;
    22.       --md-black: #000;
    23.       --md-white: #FFF;
    24.       font-family: 'Roboto', sans-serif;
    25.  
    26.  
    27.       /* BOOTSTRAP COLORS*/
    28.       /* Bootstrap 4 has some css variables exposes, mostly colors. */
    29.  
    30.       /* RE-USABLE ZINGGRID VARS
    31.   ----------------------------------------------------- */
    32.       /* BACKGROUND */
    33.       --theme-background-color: var(--mdc-theme-background);
    34.       --theme-background-zebra: var(--light);
    35.  
    36.       /* BORDER */
    37.       --theme-border-color_alt: var(--light);
    38.       --theme-border-color_alt2: var(--secondary);
    39.       --zg-button-focus: var(--light);
    40.  
    41.       /* COLOR */
    42.       --theme-color-primary: var(--md-indigo);
    43.  
    44.       /* FONT */
    45.       --zg-caption-color: var(--md-black);
    46.       --theme-font-family: initial;
    47.  
    48.       --theme-padding_x: 2rem;
    49.       --theme-padding_y: 0.75rem;
    50.  
    51.       /* -------------------------------------------------- */
    52.  
    53.  
    54.       /* ZG-GRID
    55.   ----------------------------------------------------- */
    56.       /* padding: var(--theme-padding_x) var(--theme-padding_y); */
    57.       /* box-sizing: border-box; */
    58.       --zing-grid-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
    59.  
    60.       /* ZG-BODY
    61.   ----------------------------------------------------- */
    62.       --zg-body-background: var(--white);
    63.       --zg-body-card-background: transparent;
    64.  
    65.       /* Hover */
    66.       --zg-row-body-color_even_hover: var(--zg-row-body-color);
    67.       --zg-row-body-color_odd_hover: var(--zg-row-body-color);
    68.  
    69.  
    70.       /* ZG-BUTTON
    71.   ----------------------------------------------------- */
    72.       --zg-button-opacity_disabled: .5;
    73.  
    74.  
    75.       /* ZG-BUTTON-CUSTOM
    76.   ----------------------------------------------------- */
    77.       --zg-button-background_custom: var(--theme-color-primary);
    78.       --zg-button-color: var(--white);
    79.       --zg-button-border_custom: none;
    80.       --zg-button-box-shadow_custom: none;
    81.       --zg-button-border_custom_hover: none;
    82.       --zg-button-background_custom_hover: #0069d9;
    83.  
    84.       /* ZG-CAPTION
    85.   ----------------------------------------------------- */
    86.       --zg-caption-background: var(--md-white);
    87.       --zg-caption-border-bottom: 0;
    88.       --zg-caption-color: var(--md-black);
    89.       --zg-caption-icon-color: var(--md-black);
    90.  
    91.       /* ZG-CELL
    92.   ----------------------------------------------------- */
    93.       --zg-cell-background_sorted: rgba(62, 117, 167, .2);
    94.  
    95.       /* ZG-CONTROL-BAR
    96.   ----------------------------------------------------- */
    97.       --zg-control-bar-background: var(--md-white);
    98.       --zg-control-bar-border-bottom: 0;
    99.  
    100.  
    101.       /* ZG-EDITOR_ROW
    102.   ----------------------------------------------------- */
    103.       --zg-editor-row-input-background: var(--md-white);
    104.       --zg-editor-row-input-color: var(--md-white);
    105.       --zg-editor-row-input-background_focus: #00203d;
    106.       --zg-editor-row-input-box-shadow_focus: none;
    107.  
    108.       /* ZG-FILTER
    109.   ----------------------------------------------------- */
    110.  
    111.       --zg-filter-background: var(--light);
    112.       --zg-filter-background_sorted: rgba(62, 117, 167, .2);
    113.       --zg-filter-border: none;
    114.  
    115.       /* Input */
    116.       --zg-filter-input-height: calc(1.5em + .75rem + 2px);
    117.       --zg-filter-input-padding: .375rem .75rem .375rem .375rem;
    118.       --zg-filter-input-border-radius: .25rem;
    119.       --zg-filter-input-border: 1px solid #ced4da;
    120.       --zg-filter-input-background: var(--md-white);
    121.       --zg-filter-input-border-width: 1px;
    122.       --zg-filter-input-margin: .375rem;
    123.  
    124.  
    125.       /* ZG-FOCUS
    126.   ----------------------------------------------------- */
    127.       --zg-focus-border: 1px solid #80bdff;
    128.       --zg-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    129.       --zg-focus-outline: 0;
    130.  
    131.       --zg-focus-bottom-transform: translateY(1px);
    132.       --zg-focus-right-transform: translateX(1px);
    133.  
    134.       /* ZG-HEAD
    135.   ----------------------------------------------------- */
    136.       --zg-head-background: var(--md-white);
    137.  
    138.  
    139.       /* ZG-MENUITEM
    140.   ----------------------------------------------------- */
    141.       --zg-menu-background: var(--md-black);
    142.  
    143.       /* ZG-INPUT
    144.   ----------------------------------------------------- */
    145.       --zg-input-color: #00549c;
    146.       ;
    147.       --zg-input-border-bottom: 1px solid var(--theme-border-color_alt);
    148.       --zg-input-border-left: 1px solid var(--theme-border-color_alt);
    149.       --zg-input-border-right: 1px solid var(--theme-border-color_alt);
    150.       --zg-input-border-top: 1px solid var(--theme-border-color_alt);
    151.  
    152.       /* ZG-PAGER
    153.   ----------------------------------------------------- */
    154.       --zg-pager-background: transparent;
    155.       --zg-pager-border-top: 0;
    156.       --zg-pager-card-nonmobile-border-top: 1px solid var(--theme-background-color);
    157.       --zg-pager-color: var(--zg-head-cell-color);
    158.  
    159.       /* ZG-ROW
    160.   ----------------------------------------------------- */
    161.       --zg-row-border: 1px solid var(--grey);
    162.  
    163.       /* Card */
    164.       --zg-row-card-background: var(--zg-body-background);
    165.  
    166.       /* ZG-SOURCE
    167.   ----------------------------------------------------- */
    168.       --zg-source-background: #fbfbfb;
    169.       --zg-source-border-bottom_top: 1px solid #f4f4f4;
    170.       --zg-source-border-top_top: 1px solid #f4f4f4;
    171.       --zg-source-border-top_bottom: 1px solid #f4f4f4;
    172.       --zg-source-color: var(--theme-color-primary);
    173.  
    174.       /* ZG-WATERMARK
    175.   ----------------------------------------------------- */
    176.       --zg-watermark-background: transparent;
    177.       --zg-watermark-border-bottom: 0;
    178.       --zg-watermark-border-left: 0;
    179.       --zg-watermark-border-right: 0;
    180.       --zg-watermark-border-top: 0;
    181.       --zg-watermark-font-size: 10px;
    182.       --zg-watermark-padding: 0 var(--theme-padding_x);
    183.     }
    184.  
    185.     .chip-primary {
    186.       background: var(--md-indigo);
    187.     }
    188.  
    189.     .chip-secondary {
    190.       background: var(--md-gray);
    191.     }
    192.  
    193.     .chip-success {
    194.       background: var(--md-green);
    195.     }
    196.  
    197.     .chip-danger {
    198.       background: var(--md-red);
    199.     }
    200.  
    201.     .chip-warning {
    202.       background: var(--md-yellow);
    203.     }
    204.  
    205.     .progress-wrapper {
    206.       width: 200px;
    207.     }
    208.  
    209.     .mdc-linear-progress__buffer-bar {
    210.       height: 3px;
    211.     }
    212.  
    213.     .mdc-linear-progress__buffer-dots {
    214.       height: 3px;
    215.     }
    216.  
    217.     zing-grid[loading] {
    218.       height: 472px;
    219.     }
    220.   </style>
    221. </head>
    222.  
    223. <body class="zg-body">
    224.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    225.   <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting data='[
    226.         {
    227.           "first": "Mark",
    228.           "last": "Otto",
    229.           "username": "@ZTfer",
    230.           "category": "primary",
    231.           "progress": "12"
    232.         },
    233.         {
    234.           "first": "Jacob",
    235.           "last": "Thorton",
    236.           "username": "@jacobthorton",
    237.           "category": "secondary",
    238.           "progress": "62"
    239.         },
    240.         {
    241.           "first": "Duncan",
    242.           "last": "Mattheson",
    243.           "username": "@dmattheson",
    244.           "category": "danger",
    245.           "progress": "84"
    246.         },
    247.         {
    248.           "first": "David",
    249.           "last": "Jose Perez",
    250.           "username": "@djp",
    251.           "category": "info",
    252.           "progress": "45"
    253.         },
    254.         {
    255.           "first": "Dave",
    256.           "last": "Phillipson",
    257.           "username": "@phillipson",
    258.           "category": "warning",
    259.           "progress": "30"
    260.         }
    261.       ]'>
    262.     <zg-colgroup>
    263.       <zg-column index="first">[[index.first]]</zg-column>
    264.       <zg-column index="last">[[index.last]]</zg-column>
    265.       <zg-column index="username">[[index.username]]</zg-column>
    266.       <zg-column index="category">
    267.         <div class="mdc-chip chip-[[index.category]]" role="row">
    268.           <div class="mdc-chip__ripple"></div>
    269.           <span role="gridcell">
    270.             <span role="button" tabindex="0" class="mdc-chip__primary-action">
    271.               <span class="mdc-chip__text">[[index.category]]</span>
    272.             </span>
    273.           </span>
    274.         </div>
    275.       </zg-column>
    276.       <zg-column index="progress" renderer="progressBar">
    277.         <div class="progress-wrapper">
    278.           <div role="progressbar" class="mdc-linear-progress" aria-valuemin="0" aria-valuemax="1">
    279.             <div class="mdc-linear-progress__buffer">
    280.               <div class="mdc-linear-progress__buffer-bar"></div>
    281.               <div class="mdc-linear-progress__buffer-dots">[[index.progress]]</div>
    282.             </div>
    283.           </div>
    284.         </div>
    285.       </zg-column>
    286.     </zg-colgroup>
    287.   </zing-grid>
    288.   <script>
    289.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    290.     const primaryBar = 'linear-gradient(45deg, #4452B8, #65C7F7, #9CECFB)';
    291.     const primaryDot = '#9CECFB';
    292.     const secondaryBar = 'linear-gradient( 45deg, #edf6fa, #F6F6F6)';
    293.     const secondaryDot = '#F6F6F6';
    294.     const dangerBar = 'linear-gradient(45deg, #EA402F, #E25C4E, #E3928A, #E4B0AB)';
    295.     const dangerDot = '#E4B0AB';
    296.     const infoBar = 'linear-gradient(45deg, #777777, #9E9E9E, #CDCACA)';
    297.     const infoDot = '#CDCACA';
    298.     const warningBar = 'linear-gradient(45deg, #FCEA1B, #FFF688, #FFF9BA)';
    299.     const warningDot = '#FFF9BA';
    300.     window.progressBar = function(customIndex, domCell) {
    301.       const bar = domCell.querySelector('.mdc-linear-progress__buffer-bar');
    302.       const dots = domCell.querySelector('.mdc-linear-progress__buffer-dots');
    303.       dots.style.width = `${dots.innerHTML}%`;
    304.       const value = dots.innerHTML;
    305.       if (value >= 80) {
    306.         bar.style.background = dangerBar;
    307.         dots.style.backgroundColor = dangerDot;
    308.       } else if (value >= 60) {
    309.         bar.style.background = secondaryBar;
    310.         dots.style.backgroundColor = secondaryDot;
    311.       } else if (value >= 40) {
    312.         bar.style.background = infoBar;
    313.         dots.style.backgroundColor = infoDot;
    314.       } else if (value >= 20) {
    315.         bar.style.background = warningBar;
    316.         dots.style.backgroundColor = warningDot;
    317.       } else {
    318.         bar.style.background = primaryBar;
    319.         dots.style.backgroundColor = primaryDot;
    320.       }
    321.     };
    322.   </script>
    323. </body>
    324.  
    325. </html>
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <link rel="preconnect" href="https://fonts.gstatic.com">
    8.   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    9.   <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    10.   <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    11.   <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    12.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    13. </head>
    14.  
    15. <body class="zg-body">
    16.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    17.   <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting data='[
    18.         {
    19.           "first": "Mark",
    20.           "last": "Otto",
    21.           "username": "@ZTfer",
    22.           "category": "primary",
    23.           "progress": "12"
    24.         },
    25.         {
    26.           "first": "Jacob",
    27.           "last": "Thorton",
    28.           "username": "@jacobthorton",
    29.           "category": "secondary",
    30.           "progress": "62"
    31.         },
    32.         {
    33.           "first": "Duncan",
    34.           "last": "Mattheson",
    35.           "username": "@dmattheson",
    36.           "category": "danger",
    37.           "progress": "84"
    38.         },
    39.         {
    40.           "first": "David",
    41.           "last": "Jose Perez",
    42.           "username": "@djp",
    43.           "category": "info",
    44.           "progress": "45"
    45.         },
    46.         {
    47.           "first": "Dave",
    48.           "last": "Phillipson",
    49.           "username": "@phillipson",
    50.           "category": "warning",
    51.           "progress": "30"
    52.         }
    53.       ]'>
    54.     <zg-colgroup>
    55.       <zg-column index="first">[[index.first]]</zg-column>
    56.       <zg-column index="last">[[index.last]]</zg-column>
    57.       <zg-column index="username">[[index.username]]</zg-column>
    58.       <zg-column index="category">
    59.         <div class="mdc-chip chip-[[index.category]]" role="row">
    60.           <div class="mdc-chip__ripple"></div>
    61.           <span role="gridcell">
    62.             <span role="button" tabindex="0" class="mdc-chip__primary-action">
    63.               <span class="mdc-chip__text">[[index.category]]</span>
    64.             </span>
    65.           </span>
    66.         </div>
    67.       </zg-column>
    68.       <zg-column index="progress" renderer="progressBar">
    69.         <div class="progress-wrapper">
    70.           <div role="progressbar" class="mdc-linear-progress" aria-valuemin="0" aria-valuemax="1">
    71.             <div class="mdc-linear-progress__buffer">
    72.               <div class="mdc-linear-progress__buffer-bar"></div>
    73.               <div class="mdc-linear-progress__buffer-dots">[[index.progress]]</div>
    74.             </div>
    75.           </div>
    76.         </div>
    77.       </zg-column>
    78.     </zg-colgroup>
    79.   </zing-grid>
    80. </body>
    81.  
    82. </html>
    1. * {
    2.   --md-red: #f44336;
    3.   --md-orange: #ff9800;
    4.   --md-yellow: #ffeb3b;
    5.   --md-green: #4caf50;
    6.   --md-blue: #2196f3;
    7.   --md-purple: #673ab7;
    8.   --md-indigo: #3f51b5;
    9.   --md-black: #000;
    10.   --md-white: #FFF;
    11.   font-family: 'Roboto', sans-serif;
    12.  
    13.  
    14.   /* BOOTSTRAP COLORS*/
    15.   /* Bootstrap 4 has some css variables exposes, mostly colors. */
    16.  
    17.   /* RE-USABLE ZINGGRID VARS
    18.   ----------------------------------------------------- */
    19.   /* BACKGROUND */
    20.   --theme-background-color: var(--mdc-theme-background);
    21.   --theme-background-zebra: var(--light);
    22.  
    23.   /* BORDER */
    24.   --theme-border-color_alt: var(--light);
    25.   --theme-border-color_alt2: var(--secondary);
    26.   --zg-button-focus: var(--light);
    27.  
    28.   /* COLOR */
    29.   --theme-color-primary: var(--md-indigo);
    30.  
    31.   /* FONT */
    32.   --zg-caption-color: var(--md-black);
    33.   --theme-font-family: initial;
    34.  
    35.   --theme-padding_x: 2rem;
    36.   --theme-padding_y: 0.75rem;
    37.  
    38.   /* -------------------------------------------------- */
    39.  
    40.  
    41.   /* ZG-GRID
    42.   ----------------------------------------------------- */
    43.   /* padding: var(--theme-padding_x) var(--theme-padding_y); */
    44.   /* box-sizing: border-box; */
    45.   --zing-grid-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
    46.  
    47.   /* ZG-BODY
    48.   ----------------------------------------------------- */
    49.   --zg-body-background: var(--white);
    50.   --zg-body-card-background: transparent;
    51.  
    52.   /* Hover */
    53.   --zg-row-body-color_even_hover: var(--zg-row-body-color);
    54.   --zg-row-body-color_odd_hover: var(--zg-row-body-color);
    55.  
    56.  
    57.   /* ZG-BUTTON
    58.   ----------------------------------------------------- */
    59.   --zg-button-opacity_disabled: .5;
    60.  
    61.  
    62.   /* ZG-BUTTON-CUSTOM
    63.   ----------------------------------------------------- */
    64.   --zg-button-background_custom: var(--theme-color-primary);
    65.   --zg-button-color: var(--white);
    66.   --zg-button-border_custom: none;
    67.   --zg-button-box-shadow_custom: none;
    68.   --zg-button-border_custom_hover: none;
    69.   --zg-button-background_custom_hover: #0069d9;
    70.  
    71.   /* ZG-CAPTION
    72.   ----------------------------------------------------- */
    73.   --zg-caption-background: var(--md-white);
    74.   --zg-caption-border-bottom: 0;
    75.   --zg-caption-color: var(--md-black);
    76.   --zg-caption-icon-color: var(--md-black);
    77.  
    78.   /* ZG-CELL
    79.   ----------------------------------------------------- */
    80.   --zg-cell-background_sorted: rgba(62, 117, 167, .2);
    81.  
    82.   /* ZG-CONTROL-BAR
    83.   ----------------------------------------------------- */
    84.   --zg-control-bar-background: var(--md-white);
    85.   --zg-control-bar-border-bottom: 0;
    86.  
    87.  
    88.   /* ZG-EDITOR_ROW
    89.   ----------------------------------------------------- */
    90.   --zg-editor-row-input-background: var(--md-white);
    91.   --zg-editor-row-input-color: var(--md-white);
    92.   --zg-editor-row-input-background_focus: #00203d;
    93.   --zg-editor-row-input-box-shadow_focus: none;
    94.  
    95.   /* ZG-FILTER
    96.   ----------------------------------------------------- */
    97.  
    98.   --zg-filter-background: var(--light);
    99.   --zg-filter-background_sorted: rgba(62, 117, 167, .2);
    100.   --zg-filter-border: none;
    101.  
    102.   /* Input */
    103.   --zg-filter-input-height: calc(1.5em + .75rem + 2px);
    104.   --zg-filter-input-padding: .375rem .75rem .375rem .375rem;
    105.   --zg-filter-input-border-radius: .25rem;
    106.   --zg-filter-input-border: 1px solid #ced4da;
    107.   --zg-filter-input-background: var(--md-white);
    108.   --zg-filter-input-border-width: 1px;
    109.   --zg-filter-input-margin: .375rem;
    110.  
    111.  
    112.   /* ZG-FOCUS
    113.   ----------------------------------------------------- */
    114.   --zg-focus-border: 1px solid #80bdff;
    115.   --zg-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    116.   --zg-focus-outline: 0;
    117.  
    118.   --zg-focus-bottom-transform: translateY(1px);
    119.   --zg-focus-right-transform: translateX(1px);
    120.  
    121.   /* ZG-HEAD
    122.   ----------------------------------------------------- */
    123.   --zg-head-background: var(--md-white);
    124.  
    125.  
    126.   /* ZG-MENUITEM
    127.   ----------------------------------------------------- */
    128.   --zg-menu-background: var(--md-black);
    129.  
    130.   /* ZG-INPUT
    131.   ----------------------------------------------------- */
    132.   --zg-input-color: #00549c;
    133.   ;
    134.   --zg-input-border-bottom: 1px solid var(--theme-border-color_alt);
    135.   --zg-input-border-left: 1px solid var(--theme-border-color_alt);
    136.   --zg-input-border-right: 1px solid var(--theme-border-color_alt);
    137.   --zg-input-border-top: 1px solid var(--theme-border-color_alt);
    138.  
    139.   /* ZG-PAGER
    140.   ----------------------------------------------------- */
    141.   --zg-pager-background: transparent;
    142.   --zg-pager-border-top: 0;
    143.   --zg-pager-card-nonmobile-border-top: 1px solid var(--theme-background-color);
    144.   --zg-pager-color: var(--zg-head-cell-color);
    145.  
    146.   /* ZG-ROW
    147.   ----------------------------------------------------- */
    148.   --zg-row-border: 1px solid var(--grey);
    149.  
    150.   /* Card */
    151.   --zg-row-card-background: var(--zg-body-background);
    152.  
    153.   /* ZG-SOURCE
    154.   ----------------------------------------------------- */
    155.   --zg-source-background: #fbfbfb;
    156.   --zg-source-border-bottom_top: 1px solid #f4f4f4;
    157.   --zg-source-border-top_top: 1px solid #f4f4f4;
    158.   --zg-source-border-top_bottom: 1px solid #f4f4f4;
    159.   --zg-source-color: var(--theme-color-primary);
    160.  
    161.   /* ZG-WATERMARK
    162.   ----------------------------------------------------- */
    163.   --zg-watermark-background: transparent;
    164.   --zg-watermark-border-bottom: 0;
    165.   --zg-watermark-border-left: 0;
    166.   --zg-watermark-border-right: 0;
    167.   --zg-watermark-border-top: 0;
    168.   --zg-watermark-font-size: 10px;
    169.   --zg-watermark-padding: 0 var(--theme-padding_x);
    170. }
    171.  
    172. .chip-primary {
    173.   background: var(--md-indigo);
    174. }
    175.  
    176. .chip-secondary {
    177.   background: var(--md-gray);
    178. }
    179.  
    180. .chip-success {
    181.   background: var(--md-green);
    182. }
    183.  
    184. .chip-danger {
    185.   background: var(--md-red);
    186. }
    187.  
    188. .chip-warning {
    189.   background: var(--md-yellow);
    190. }
    191.  
    192. .progress-wrapper {
    193.   width: 200px;
    194. }
    195.  
    196. .mdc-linear-progress__buffer-bar {
    197.   height: 3px;
    198. }
    199.  
    200. .mdc-linear-progress__buffer-dots {
    201.   height: 3px;
    202. }
    1. const primaryBar = 'linear-gradient(45deg, #4452B8, #65C7F7, #9CECFB)';
    2. const primaryDot = '#9CECFB';
    3. const secondaryBar = 'linear-gradient( 45deg, #edf6fa, #F6F6F6)';
    4. const secondaryDot = '#F6F6F6';
    5. const dangerBar = 'linear-gradient(45deg, #EA402F, #E25C4E, #E3928A, #E4B0AB)';
    6. const dangerDot = '#E4B0AB';
    7. const infoBar = 'linear-gradient(45deg, #777777, #9E9E9E, #CDCACA)';
    8. const infoDot = '#CDCACA';
    9. const warningBar = 'linear-gradient(45deg, #FCEA1B, #FFF688, #FFF9BA)';
    10. const warningDot = '#FFF9BA';
    11. window.progressBar = function(customIndex, domCell) {
    12.   const bar = domCell.querySelector('.mdc-linear-progress__buffer-bar');
    13.   const dots = domCell.querySelector('.mdc-linear-progress__buffer-dots');
    14.   dots.style.width = `${dots.innerHTML}%`;
    15.   const value = dots.innerHTML;
    16.   if (value >= 80) {
    17.     bar.style.background = dangerBar;
    18.     dots.style.backgroundColor = dangerDot;
    19.   } else if (value >= 60) {
    20.     bar.style.background = secondaryBar;
    21.     dots.style.backgroundColor = secondaryDot;
    22.   } else if (value >= 40) {
    23.     bar.style.background = infoBar;
    24.     dots.style.backgroundColor = infoDot;
    25.   } else if (value >= 20) {
    26.     bar.style.background = warningBar;
    27.     dots.style.backgroundColor = warningDot;
    28.   } else {
    29.     bar.style.background = primaryBar;
    30.     dots.style.backgroundColor = primaryDot;
    31.   }
    32. };