index.html


        <head>
            <title>Kendo UI for Angular Example Application</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
            <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/4.42.0/default/default-main.css"></link>

            <style>
                body { font-family: "RobotoRegular",Helvetica,Arial,sans-serif; font-size: 14px; margin: 0; }
                my-app { display: block; box-sizing: border-box; padding: 30px; }
                my-app > .k-icon.k-i-loading { font-size: 64px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
                .example-wrapper { min-height: 280px; align-content: flex-start; }
                .example-wrapper p, .example-col p { margin: 0 0 10px; }
                .example-wrapper p:first-child, .example-col p:first-child { margin-top: 0; }
                .example-col { display: inline-block; vertical-align: top; padding-right: 20px; padding-bottom: 20px; }
                .example-config { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); }
                .event-log { margin: 0; padding: 0; max-height: 100px; overflow-y: auto; list-style-type: none; border: 1px solid rgba(0,0,0,.08); background-color: #fff; }
                .event-log li {margin: 0; padding: .3em; line-height: 1.2em; border-bottom: 1px solid rgba(0,0,0,.08); }
                .event-log li:last-child { margin-bottom: -1px;}
            </style>
        </head>

        <body>
            <my-app>
                <span class="k-icon k-i-loading" style="color: #ff6358"></span>
            </my-app>
        </body>
        