<h1>
    FlexGrid Spinners
</h1>
<p>
    This sample shows how you can add spinners to the FlexGrid control
    to indicate the process of loading data. The basic idea is to add a spinner
    element to the grid when you start loading the data, and remove the
    spinner when you get the data displayed on the grid.
</p>

<h3>
    GIF Spinners
</h3>
<p>
    This example shows an animated GIF while the grid is loading:
</p>
<button id="btn-load-gif" class="btn btn-primary">
    Load Grid Using GIF Spinner
</button>
@Html.C1().FlexGrid().Id("theGridGif")
<div style="display:none">
    <div id="theSpinnerGif" class="spinner">
        <img src="https://preloaders.net/preloaders/159/Rounded%20blocks.gif">
    </div>
</div>

<h3>
    Gauge Spinners
</h3>
<p>
    This example shows an animated RadialGauge while the grid is loading:
</p>
<button id="btn-load-gauge" class="btn btn-primary">
    Load Grid Using Gauge Spinner
</button>
@Html.C1().FlexGrid().Id("theGridGauge")
<div style="display:none">
    @(Html.C1().RadialGauge().Id("theSpinnerGauge")
        .CssClass("spinner").IsAnimated(false)
        .ShowText(ShowText.None)
        .SweepAngle(360)
        .Step(5).Max(100)
        .ShowTicks(true)
        .Face(f=>f.Color(System.Drawing.Color.Transparent))
    )
</div>

<h3>
    Loading Mask
</h3>
<p>
    When FlexGrid binds to a CollectionViewService which uses remote bind mode,
    it shows a mask with text "Loading..." while loading data from the remote server.
    You can customize the mask by overriding the c1-grid-mask CSS class.
</p>
@(Html.C1().FlexGrid().Id("theGridMask").Height(250)
    .Bind(b => b.Bind(Url.Action("CVFlexGridSpinners_Read")))
)