New to Kendo UI for jQuery? Download free 30-day trial

Items

The Kendo UI SkeletonContainer uses the default CSS Grid layout as a base. Each cell or group of cells from the CSS Grid can be represented by an item from the SkeletonContainer.

Each item contains the following properties:

  • colStart - indicates the starting column of the item.
  • colSpan - indicates how many columns the item will occupy.
  • rowStart - indicates the starting row of the item.
  • rowSpan - indicates how many rows the item will occupy
  • shape - the type of shape that will fill the selected cells.

The following example shows how to create a SkeletonContainer using a grid featuring all shape types:

    <style>
        #skeleton {
            border: 1px solid;
            border-color: rgba(0, 0, 0, 0.08);
        }
    </style>
    <div id="skeleton"></div>

    <script>
            $("#skeleton").kendoSkeletonContainer({
                animation: "pulse",
                height: 340,
                width: 350,
                grid: {
                    items: [{
                        colStart: 2,
                        colSpan: 4,
                        rowStart: 2,
                        rowSpan: 4,
                        shape: "circle"
                    },
                    {
                        colStart: 7,
                        colSpan:13,
                        rowStart: 2,
                        rowSpan: 2,
                        shape: "text"
                    },
                    {
                        colStart: 7,
                        colSpan: 9,
                        rowStart: 4,
                        rowSpan: 2,
                        shape: "text"
                    },
                    {
                        colStart: 1,
                        colSpan: 20,
                        rowStart: 7,
                        rowSpan: 11,
                        shape: "rectangle"
                    },
                    {
                        colStart: 2,
                        colSpan: 18,
                        rowStart: 19,
                        rowSpan: 1,
                        shape: "text"
                    }],
                    rows: 20,
                    columns: 20
                },
            });
        });
    </script>

See Also

In this article