# Loader

Loading feedback for asynchronous operations and data retrieval.

## Installation

Download: /api/catalog/loader/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically.

Add an Embedded View (ia.display.view), set props.path to Viewcraft/Components/UI/Loader/Loader, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| variant | string | input | "spinner" |

| size | number | input | 24 |

| label | string | input | "Sincronizando..." |

| reducedMotion | boolean | input | false |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Viewcraft/Components/UI/Loader/Loader",
    "params": {
      "variant": "spinner",
      "size": 24,
      "label": "Sincronizando...",
      "reducedMotion": false
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Loader/Loader/view.json

```json

{
  "custom": {},
  "params": {
    "variant": "spinner",
    "size": 24,
    "label": "Sincronizando...",
    "reducedMotion": false
  },
  "propConfig": {
    "params.variant": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.size": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.reducedMotion": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 220,
      "height": 36
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "Loader"
    },
    "props": {
      "direction": "row",
      "wrap": "nowrap",
      "alignItems": "center",
      "justify": "flex-start",
      "style": {
        "gap": "8px",
        "minWidth": 0,
        "boxSizing": "border-box",
        "classes": "vc/loader vc/loader-24",
        "alignItems": "center",
        "overflow": "visible"
      }
    },
    "position": {
      "grow": 0,
      "shrink": 0,
      "basis": "auto"
    },
    "propConfig": {
      "props.style.classes": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "\"vc/loader vc/loader-\" + toString({view.params.size}) + if(coalesce({view.params.reducedMotion}, false), \" vc/loader-reduced\", \"\")"
          }
        }
      }
    },
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "Spinner",
          "visible": true
        },
        "props": {
          "direction": "row",
          "wrap": "nowrap",
          "alignItems": "center",
          "justify": "center",
          "style": {
            "gap": "0px",
            "minWidth": 0,
            "boxSizing": "border-box",
            "alignItems": "center",
            "justifyContent": "center",
            "classes": "vc/loader-visual"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "Ring"
            },
            "props": {
              "text": " ",
              "style": {
                "padding": "0px",
                "margin": "0px",
                "classes": "vc/loader-spinner",
                "width": "24px",
                "height": "24px",
                "minWidth": "24px",
                "minHeight": "24px",
                "maxWidth": "24px",
                "maxHeight": "24px",
                "borderStyle": "solid",
                "borderWidth": "2px",
                "borderColor": "#3f3f46",
                "borderTopColor": "#fafafa",
                "borderRadius": "50%",
                "backgroundColor": "transparent",
                "overflow": "hidden",
                "fontSize": "1px",
                "lineHeight": "1px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")"
                  }
                }
              },
              "props.style.height": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")"
                  }
                }
              },
              "props.style.minWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")"
                  }
                }
              },
              "props.style.minHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")"
                  }
                }
              },
              "props.style.maxWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")"
                  }
                }
              },
              "props.style.maxHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")"
                  }
                }
              },
              "props.style.borderWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"2px\", \"2px\", \"3px\", \"2px\")"
                  }
                }
              }
            }
          }
        ],
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "lower(toString({view.params.variant})) = \"spinner\""
              }
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "Dots",
          "visible": true
        },
        "props": {
          "direction": "row",
          "wrap": "nowrap",
          "alignItems": "center",
          "justify": "center",
          "style": {
            "gap": "4px",
            "minWidth": 0,
            "boxSizing": "border-box",
            "alignItems": "center",
            "justifyContent": "center",
            "classes": "vc/loader-visual",
            "overflow": "visible"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "row",
              "wrap": "nowrap",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/loader-dot vc/loader-dot-1",
                "width": "7px",
                "height": "7px",
                "minWidth": "7px",
                "minHeight": "7px",
                "padding": "0px",
                "margin": "0px",
                "borderRadius": "50%",
                "backgroundColor": "#fafafa",
                "overflow": "visible",
                "flexShrink": 0,
                "position": "relative",
                "zIndex": 2
              }
            },
            "meta": {
              "name": "Dot1"
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.height": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.minWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.minHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.maxWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.maxHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              }
            },
            "children": []
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "row",
              "wrap": "nowrap",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/loader-dot vc/loader-dot-2",
                "width": "7px",
                "height": "7px",
                "minWidth": "7px",
                "minHeight": "7px",
                "padding": "0px",
                "margin": "0px",
                "borderRadius": "50%",
                "backgroundColor": "#fafafa",
                "overflow": "visible",
                "flexShrink": 0,
                "position": "relative",
                "zIndex": 2
              }
            },
            "meta": {
              "name": "Dot2"
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.height": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.minWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.minHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.maxWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.maxHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              }
            },
            "children": []
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "row",
              "wrap": "nowrap",
              "alignItems": "center",
              "justify": "center",
              "style": {
                "classes": "vc/loader-dot vc/loader-dot-3",
                "width": "7px",
                "height": "7px",
                "minWidth": "7px",
                "minHeight": "7px",
                "padding": "0px",
                "margin": "0px",
                "borderRadius": "50%",
                "backgroundColor": "#fafafa",
                "overflow": "visible",
                "flexShrink": 0,
                "position": "relative",
                "zIndex": 2
              }
            },
            "meta": {
              "name": "Dot3"
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.height": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.minWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.minHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.maxWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              },
              "props.style.maxHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")"
                  }
                }
              }
            },
            "children": []
          }
        ],
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "lower(toString({view.params.variant})) = \"dots\""
              }
            }
          },
          "props.style.gap": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
              }
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "Bars",
          "visible": true
        },
        "props": {
          "direction": "row",
          "wrap": "nowrap",
          "alignItems": "center",
          "justify": "center",
          "style": {
            "gap": "4px",
            "minWidth": 0,
            "boxSizing": "border-box",
            "alignItems": "center",
            "justifyContent": "center",
            "classes": "vc/loader-visual"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "Bar1"
            },
            "props": {
              "direction": "column",
              "style": {
                "classes": "vc/loader-bar vc/loader-bar-1",
                "width": "4px",
                "height": "18px",
                "minWidth": "4px",
                "minHeight": "14px",
                "maxWidth": "4px",
                "maxHeight": "18px",
                "backgroundColor": "#a1a1aa",
                "borderRadius": "1px",
                "boxSizing": "border-box"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.height": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              },
              "props.style.minWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.minHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              },
              "props.style.maxWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.maxHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              }
            },
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "Bar1Inner"
                },
                "props": {
                  "text": " ",
                  "style": {
                    "width": "100%",
                    "height": "100%",
                    "backgroundColor": "#a1a1aa",
                    "padding": "0px",
                    "margin": "0px",
                    "fontSize": "1px"
                  }
                },
                "position": {
                  "grow": 1,
                  "shrink": 0,
                  "basis": "auto"
                }
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "Bar2"
            },
            "props": {
              "direction": "column",
              "style": {
                "classes": "vc/loader-bar vc/loader-bar-2",
                "width": "4px",
                "height": "18px",
                "minWidth": "4px",
                "minHeight": "14px",
                "maxWidth": "4px",
                "maxHeight": "18px",
                "backgroundColor": "#a1a1aa",
                "borderRadius": "1px",
                "boxSizing": "border-box"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.height": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              },
              "props.style.minWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.minHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              },
              "props.style.maxWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.maxHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              }
            },
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "Bar2Inner"
                },
                "props": {
                  "text": " ",
                  "style": {
                    "width": "100%",
                    "height": "100%",
                    "backgroundColor": "#a1a1aa",
                    "padding": "0px",
                    "margin": "0px",
                    "fontSize": "1px"
                  }
                },
                "position": {
                  "grow": 1,
                  "shrink": 0,
                  "basis": "auto"
                }
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "Bar3"
            },
            "props": {
              "direction": "column",
              "style": {
                "classes": "vc/loader-bar vc/loader-bar-3",
                "width": "4px",
                "height": "18px",
                "minWidth": "4px",
                "minHeight": "14px",
                "maxWidth": "4px",
                "maxHeight": "18px",
                "backgroundColor": "#a1a1aa",
                "borderRadius": "1px",
                "boxSizing": "border-box"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.width": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.height": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              },
              "props.style.minWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.minHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              },
              "props.style.maxWidth": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")"
                  }
                }
              },
              "props.style.maxHeight": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")"
                  }
                }
              }
            },
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "Bar3Inner"
                },
                "props": {
                  "text": " ",
                  "style": {
                    "width": "100%",
                    "height": "100%",
                    "backgroundColor": "#a1a1aa",
                    "padding": "0px",
                    "margin": "0px",
                    "fontSize": "1px"
                  }
                },
                "position": {
                  "grow": 1,
                  "shrink": 0,
                  "basis": "auto"
                }
              }
            ]
          }
        ],
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "lower(toString({view.params.variant})) = \"bars\""
              }
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "Ascii",
          "visible": true
        },
        "props": {
          "direction": "row",
          "wrap": "nowrap",
          "alignItems": "center",
          "justify": "center",
          "style": {
            "gap": "3px",
            "minWidth": 0,
            "boxSizing": "border-box",
            "alignItems": "center",
            "justifyContent": "center",
            "classes": "vc/loader-visual"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "Glyph"
            },
            "props": {
              "text": "*",
              "style": {
                "padding": "0px",
                "margin": "0px",
                "classes": "vc/loader-glyph",
                "color": "#fafafa",
                "fontFamily": "ui-monospace, Consolas, monospace",
                "fontSize": "18px",
                "fontWeight": 700,
                "lineHeight": "1",
                "textAlign": "center"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "propConfig": {
              "props.style.fontSize": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "switch({view.params.size}, 16, 24, 32, \"14px\", \"20px\", \"26px\", \"20px\")"
                  }
                }
              }
            }
          }
        ],
        "propConfig": {
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "lower(toString({view.params.variant})) = \"ascii\""
              }
            }
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "Caption",
          "visible": true
        },
        "props": {
          "text": "Sincronizando...",
          "style": {
            "padding": "0px",
            "margin": "0px",
            "classes": "vc/loader-label",
            "color": "#a1a1aa",
            "fontSize": "12px",
            "fontWeight": 500
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "{view.params.label}"
              }
            }
          },
          "meta.visible": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "len(toString({view.params.label})) > 0"
              }
            }
          }
        }
      }
    ]
  }
}


```

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Loader/Loader/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader/style.json

```json

{
  "base": {
    "style": {
      "display": "flex",
      "alignItems": "center",
      "justifyContent": "flex-start",
      "gap": "8px",
      "boxSizing": "border-box",
      "minWidth": 0
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-24/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-24/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-reduced/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-reduced/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-visual/style.json

```json

{
  "base": {
    "style": {
      "display": "flex",
      "alignItems": "center",
      "justifyContent": "center",
      "gap": "3px",
      "boxSizing": "border-box",
      "flexShrink": 0
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-visual/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-spinner/style.json

```json

{
  "base": {
    "style": {
      "borderStyle": "solid",
      "borderWidth": "2px",
      "borderColor": "#3f3f46",
      "borderRadius": "50%",
      "backgroundColor": "transparent",
      "padding": "0px",
      "margin": "0px",
      "overflow": "hidden",
      "boxSizing": "border-box"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-spinner/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-dot/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#a1a1aa",
      "borderRadius": "999px",
      "padding": "0px",
      "margin": "0px",
      "overflow": "hidden"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-dot/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-dot-1/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-dot-1/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-dot-2/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-dot-2/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-dot-3/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-dot-3/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-bar/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#a1a1aa",
      "borderRadius": "1px",
      "padding": "0px",
      "margin": "0px",
      "overflow": "hidden"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-bar/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-bar-1/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-bar-1/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-bar-2/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-bar-2/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-bar-3/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-bar-3/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-glyph/style.json

```json

{
  "base": {
    "style": {
      "color": "#fafafa",
      "fontWeight": 600,
      "padding": "0px",
      "margin": "0px"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-glyph/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-label/style.json

```json

{
  "base": {
    "style": {
      "color": "#a1a1aa",
      "fontSize": "12px",
      "fontWeight": 500,
      "lineHeight": "16px",
      "whiteSpace": "nowrap",
      "padding": "0px",
      "margin": "0px"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-label/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-16/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-16/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-32/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-32/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-demo/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#09090b",
      "color": "#fafafa",
      "boxSizing": "border-box"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-demo/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/loader-demo-card/style.json

```json

{
  "base": {
    "style": {
      "backgroundColor": "#171717",
      "borderStyle": "solid",
      "borderWidth": "1px",
      "borderColor": "#3f3f46",
      "borderRadius": "10px",
      "boxSizing": "border-box"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/loader-demo-card/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### stylesheet-snippet.css

```css



[class~="psc-vc/loader"], .psc-vc\/loader {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  color: var(--vc-foreground, #fafafa) !important;
}

[class~="psc-vc/loader-visual"], .psc-vc\/loader-visual {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
[class~="psc-vc/loader-spinner"], .psc-vc\/loader-spinner {
  display: block !important;
  box-sizing: border-box !important;
  border: 2px solid #3f3f46 !important;
  border-top-color: #fafafa !important;
  border-radius: 50% !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  animation: vc-loader-spin 0.8s linear infinite;
}
[class~="psc-vc/loader-spinner"] .ia_label__text, .psc-vc\/loader-spinner .ia_label__text {
  display: none !important;
}
[class~="psc-vc/loader-dot"], .psc-vc\/loader-dot {
  display: block !important;
  background-color: var(--vc-primary, #fafafa) !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  position: relative !important;
  z-index: 2 !important;
  animation: vc-loader-dots 1.2s ease-in-out infinite;
}
[class~="psc-vc/loader-dot"] .ia_label__text, .psc-vc\/loader-dot .ia_label__text {
  display: none !important;
}
[class~="psc-vc/loader-dot-1"], .psc-vc\/loader-dot-1 { animation-delay: 0s; }
[class~="psc-vc/loader-dot-2"], .psc-vc\/loader-dot-2 { animation-delay: 0.16s; }
[class~="psc-vc/loader-dot-3"], .psc-vc\/loader-dot-3 { animation-delay: 0.32s; }
[class~="psc-vc/loader-bar"], .psc-vc\/loader-bar {
  display: block !important;
  background-color: #a1a1aa !important;
  border-radius: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  transform-origin: center bottom;
  animation: vc-loader-bars 1s ease-in-out infinite;
}
[class~="psc-vc/loader-bar"] .ia_label__text, .psc-vc\/loader-bar .ia_label__text {
  display: none !important;
}
[class~="psc-vc/loader-bar-1"], .psc-vc\/loader-bar-1 { animation-delay: 0s; }
[class~="psc-vc/loader-bar-2"], .psc-vc\/loader-bar-2 { animation-delay: 0.14s; }
[class~="psc-vc/loader-bar-3"], .psc-vc\/loader-bar-3 { animation-delay: 0.28s; }
[class~="psc-vc/loader-glyph"], .psc-vc\/loader-glyph {
  color: var(--vc-foreground, #fafafa) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  animation: vc-loader-pulse 1.4s ease-in-out infinite;
}
[class~="psc-vc/loader-label"], .psc-vc\/loader-label {
  color: var(--vc-muted-fg, #a1a1aa) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
}
[class~="psc-vc/loader-16"] [class~="psc-vc/loader-spinner"], .psc-vc\/loader-16 .psc-vc\/loader-spinner {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border-width: 2px !important;
}
[class~="psc-vc/loader-24"] [class~="psc-vc/loader-spinner"], .psc-vc\/loader-24 .psc-vc\/loader-spinner {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-width: 2px !important;
}
[class~="psc-vc/loader-32"] [class~="psc-vc/loader-spinner"], .psc-vc\/loader-32 .psc-vc\/loader-spinner {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-width: 3px !important;
}

[class~="psc-vc/loader-16"] [class~="psc-vc/loader-dot"], .psc-vc\/loader-16 .psc-vc\/loader-dot {
  width: 6px !important; height: 6px !important;
  min-width: 6px !important; min-height: 6px !important;
  max-width: 6px !important; max-height: 6px !important;
}
[class~="psc-vc/loader-24"] [class~="psc-vc/loader-dot"], .psc-vc\/loader-24 .psc-vc\/loader-dot {
  width: 8px !important; height: 8px !important;
  min-width: 8px !important; min-height: 8px !important;
  max-width: 8px !important; max-height: 8px !important;
}
[class~="psc-vc/loader-32"] [class~="psc-vc/loader-dot"], .psc-vc\/loader-32 .psc-vc\/loader-dot {
  width: 10px !important; height: 10px !important;
  min-width: 10px !important; min-height: 10px !important;
  max-width: 10px !important; max-height: 10px !important;
}

[class~="psc-vc/loader-16"] [class~="psc-vc/loader-bar"], .psc-vc\/loader-16 .psc-vc\/loader-bar {
  width: 3px !important; height: 12px !important;
  min-width: 3px !important; min-height: 12px !important;
}
[class~="psc-vc/loader-24"] [class~="psc-vc/loader-bar"], .psc-vc\/loader-24 .psc-vc\/loader-bar {
  width: 4px !important; height: 18px !important;
  min-width: 4px !important; min-height: 18px !important;
}
[class~="psc-vc/loader-32"] [class~="psc-vc/loader-bar"], .psc-vc\/loader-32 .psc-vc\/loader-bar {
  width: 5px !important; height: 24px !important;
  min-width: 5px !important; min-height: 24px !important;
}

[class~="psc-vc/loader-16"] [class~="psc-vc/loader-glyph"], .psc-vc\/loader-16 .psc-vc\/loader-glyph { font-size: 14px !important; }
[class~="psc-vc/loader-24"] [class~="psc-vc/loader-glyph"], .psc-vc\/loader-24 .psc-vc\/loader-glyph { font-size: 20px !important; }
[class~="psc-vc/loader-32"] [class~="psc-vc/loader-glyph"], .psc-vc\/loader-32 .psc-vc\/loader-glyph { font-size: 26px !important; }
[class~="psc-vc/loader-reduced"] [class~="psc-vc/loader-spinner"], .psc-vc\/loader-reduced .psc-vc\/loader-spinner, [class~="psc-vc/loader-reduced"] [class~="psc-vc/loader-dot"], .psc-vc\/loader-reduced .psc-vc\/loader-dot, [class~="psc-vc/loader-reduced"] [class~="psc-vc/loader-bar"], .psc-vc\/loader-reduced .psc-vc\/loader-bar, [class~="psc-vc/loader-reduced"] [class~="psc-vc/loader-glyph"], .psc-vc\/loader-reduced .psc-vc\/loader-glyph {
  animation: vc-loader-pulse 1.4s ease-in-out infinite !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  [class~="psc-vc/loader-spinner"], .psc-vc\/loader-spinner, [class~="psc-vc/loader-dot"], .psc-vc\/loader-dot, [class~="psc-vc/loader-bar"], .psc-vc\/loader-bar, [class~="psc-vc/loader-glyph"], .psc-vc\/loader-glyph {
    animation: vc-loader-pulse 1.4s ease-in-out infinite !important;
    transform: none !important;
  }
}
[class~="psc-vc/loader-24"] [class~="psc-vc/loader-visual"], .psc-vc\/loader-24 .psc-vc\/loader-visual {
  gap: 5px !important;
}
[class~="psc-vc/loader-32"] [class~="psc-vc/loader-visual"], .psc-vc\/loader-32 .psc-vc\/loader-visual {
  gap: 6px !important;
}
[class~="psc-vc/loader"] .component-meta-hidden, .psc-vc\/loader .component-meta-hidden {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
[class~="psc-vc/loader-visual"], .psc-vc\/loader-visual {
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
}
[class~="psc-vc/loader-demo"], .psc-vc\/loader-demo {
  background-color: var(--vc-background, #09090b) !important;
  color: var(--vc-foreground, #fafafa) !important;
  box-sizing: border-box !important;
}
[class~="psc-vc/loader-demo-card"], .psc-vc\/loader-demo-card {
  background-color: var(--vc-panel, #171717) !important;
  border: 1px solid var(--vc-border, #3f3f46) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
[class~="psc-vc/loader-bar"], .psc-vc\/loader-bar {
  background-color: #a1a1aa !important;
  min-width: 3px !important;
  min-height: 12px !important;
}
[class~="psc-vc/loader-dot"], .psc-vc\/loader-dot {
  background-color: var(--vc-primary, #fafafa) !important;
  color: var(--vc-foreground, #fafafa) !important;
  min-width: 5px !important;
  min-height: 5px !important;
}
[class~="psc-vc/loader-glyph"], .psc-vc\/loader-glyph {
  color: var(--vc-foreground, #fafafa) !important;
  min-width: 12px !important;
  min-height: 12px !important;
}

@keyframes vc-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes vc-loader-dots {
  0%, 80%, 100% { opacity: 0.45; }
  40% { opacity: 1; }
}



@keyframes vc-loader-bars {
  0%, 80%, 100% { transform: scaleY(0.35); opacity: 0.35; }
  40% { transform: scaleY(1); opacity: 1; }
}
@keyframes vc-loader-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

```