Loader 4

ImageList79 nodes · 29 styles

Description

Full-screen loader with horizontal progress bar and percentage indicator

Detailed Analysis

This loader features a horizontal progress bar centered on a black background. The bar shows loading progress with a white filled portion against a gray track, accompanied by 'Loading' text on the left and '25%' percentage indicator on the right. This design provides clear visual feedback on loading progress, giving users an estimate of wait time.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

loaderprogress barpercentage indicatorloading progressdark backgroundfull screenhorizontal barpreloaderloading percentageprogress indicatorblack backgroundloading textprogress trackerlinear progress

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-1904",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
              "actionListId": "a-495",
              "playInReverse": false,
              "autoStopEventId": "e-1905",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_START_ACTION"
          },
          "config": {
            "loop": false,
            "delay": null,
            "effectIn": null,
            "direction": null,
            "playInReverse": false,
            "scrollOffsetUnit": null,
            "scrollOffsetValue": null
          },
          "target": {
            "id": "6540ac58fa7ea7efe56967e8|48227664-475e-d8bc-1269-ddbe47e81367",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe56967e8|48227664-475e-d8bc-1269-ddbe47e81367",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1680160015744,
          "eventTypeId": "MOUSE_CLICK",
          "mediaQueries": [
            "main",
            "medium"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-1905",
          "name": "",
          "action": null,
          "config": {
            "loop": false,
            "delay": null,
            "effectIn": null,
            "direction": null,
            "playInReverse": false,
            "scrollOffsetUnit": null,
            "scrollOffsetValue": null
          },
          "target": {
            "id": "654
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [ { "id": "e-1904", "name": "", "action": { "id": "", "config": { "delay": 0, "easing": "", "duration": 0, "actionListId": "a-495", "playInReverse": false, "autoStopEventId": "e-1905", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_START_ACTION" }, "config": { "loop": false, "delay": null, "effectIn": null, "direction": null, "playInReverse": false, "scrollOffsetUnit": null, "scrollOffsetValue": null }, "target": { "id": "6540ac58fa7ea7efe56967e8|48227664-475e-d8bc-1269-ddbe47e81367", "appliesTo": "ELEMENT", "styleBlockIds": [] }, "targets": [ { "id": "6540ac58fa7ea7efe56967e8|48227664-475e-d8bc-1269-ddbe47e81367", "appliesTo": "ELEMENT", "styleBlockIds": [] } ], "createdOn": 1680160015744, "eventTypeId": "MOUSE_CLICK", "mediaQueries": [ "main", "medium" ], "animationType": "custom" }, { "id": "e-1905", "name": "", "action": null, "config": { "loop": false, "delay": null, "effectIn": null, "direction": null, "playInReverse": false, "scrollOffsetUnit": null, "scrollOffsetValue": null }, "target": { "id": "654 ... (truncated)