Set the template to the Spinner
21 Dec 202214 minutes to read
You can use custom templates on the Spinner instead of the default Spinner by specifying the template in the setSpinner method.
The following steps explains you on how to define template for Spinner.
- Pass your custom template to the
setSpinnermethod like as below.
// Specify the template content to be displayed in the Spinner
setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>'});NOTE
You should set the template to the Spinner before creating the respective Essential JS 2 component. Also,until we replace
setSpinnertemplate, the further Essential JS 2 component rendering is created with given template only.
- Now, render the Essential JS 2 component. It’s render the Spinner with the template specified in the
setSpinnermethod.
NOTE
In the below sample, we have rendered the Grid component with custom Spinner using
setSpinnermethod. You have to define the styles for the template in style section.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Grid
<div class="col-lg-12 control-section">
<div class="e-sample-resize-container">
@Html.EJ().Grid("ej2Grid1").DataSource(ViewBag.datasource).Created("grid1Created").AllowPaging(true).Columns(new List<GridColumn> {
new GridColumn { Field = "OrderID", HeaderText = "Order ID", Width = "120" },
new GridColumn { Field = "CustomerID", HeaderText = "Customer Name", Width = "150" },
new GridColumn { Field = "OrderDate", HeaderText = "Order Date", Width = "130", Format="yMd" },
new GridColumn { Field = "Freight", HeaderText = "Freight", Width = "120" },
new GridColumn { Field = "ShippedDate", HeaderText = "Shipped Date", Width = "140", Format="yMd" },
new GridColumn { Field = "ShipCountry", HeaderText = "Ship Country", Width = "150" },
}).Render()
<br />
<br />
<br />
@Html.EJ().Grid("ej2Grid2").DataSource(ViewBag.datasource).Created("grid2Created").AllowPaging(true).Columns(new List<GridColumn> {
new GridColumn { Field = "OrderID", HeaderText = "Order ID", Width = "120" },
new GridColumn { Field = "CustomerID", HeaderText = "Customer Name", Width = "150" },
new GridColumn { Field = "OrderDate", HeaderText = "Order Date", Width = "130", Format="yMd" },
new GridColumn { Field = "Freight", HeaderText = "Freight", Width = "120" },
new GridColumn { Field = "ShippedDate", HeaderText = "Shipped Date", Width = "140", Format="yMd" },
new GridColumn { Field = "ShipCountry", HeaderText = "Ship Country", Width = "150" },
}).Render()
</div>
</div>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 240px;
}
h5 {
font-weight: bold;
text-align: center;
}
@@keyframes custom-rolling {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@@-webkit-keyframes custom-rolling {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
.custom-rolling {
position: relative;
}
.custom-rolling div,
.custom-rolling div:after {
border: 16px solid #51CACC;
border-radius: 50%;
border-top-color: transparent;
height: 160px;
position: absolute;
width: 160px;
}
.custom-rolling div {
-webkit-animation: custom-rolling 1.3s linear infinite;
animation: custom-rolling 1.3s linear infinite;
top: 100px;
left: 100px;
}
.custom-rolling div:after {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.custom-rolling {
-webkit-transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px);
height: 62px !important;
transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px);
width: 62px !important;
}
</style>
<script type="text/javascript">
function grid1Created() {
var grid1 = document.getElementById("ej2Grid1").ej2_instances[0];
grid1.hideSpinner = () => true;
ej.popups.setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>' });
}
function grid2Created() {
var grid2 = document.getElementById("ej2Grid2").ej2_instances[0];
grid2.hideSpinner = () => true;
}
</script>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Grid;
namespace WebApplication1.Controllers
{
public partial class SpinnerController : Controller
{
public static List<OrderDetails> order = new List<OrderDetails>();
public IActionResult template()
{
if (order.Count() == 0)
BindDataSource();
ViewBag.datasource = order;
return View();
}
public void BindDataSource()
{
int code = 10000;
for (int i = 1; i < 10; i++)
{
order.Add(new OrderDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
order.Add(new OrderDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
order.Add(new OrderDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
order.Add(new OrderDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
order.Add(new OrderDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
code += 5;
}
}
[Serializable]
public class OrderDetails
{
public OrderDetails()
{
}
public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
{
this.OrderID = OrderID;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.ShipCity = ShipCity;
this.Verified = Verified;
this.OrderDate = OrderDate;
this.ShipName = ShipName;
this.ShipCountry = ShipCountry;
this.ShippedDate = ShippedDate;
this.ShipAddress = ShipAddress;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
}
}