We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Progress Bar/Spinner

Hi, are there any plans to add a progress bar to Blazor Components? or a Circular spinner like in https://ej2.syncfusion.com/blazor that shows when the page is loading?

3 Replies

PM Pandiyaraj Muniyandi Syncfusion Team August 21, 2019 05:07 AM

Hi Raul, 
 
Greetings from Syncfusion support. 
 
Query #1: are there any plans to add a progress bar to Blazor Components? 
 
Currently, we have no immediate plan to implement this ‘Progress Bar’ component in Blazor. However, we have considered your requirement as new component request in our end. You can track the status of the requested feature in the below feedback link from below. 
 
 
Query #2: Circular spinner like in https://ej2.syncfusion.com/blazor that shows when the page is loading? 
 
Already, we have planned to include public functions to create Circular Spinner in upcoming 2019 Volume 3 release. You can track the status of the requested feature in the below feedback link from below. 
 
 
Meanwhile, we have achieved this component using JS interop and attached the sample. Please find the below sample for creating the Spinner component and show on button click. 
 
Please find the below code.  
 
Index.razor  
 
@using Syncfusion.EJ2.Blazor 
@using Microsoft.JSInterop; 
 
<button class="e-btn" @onclick="@ShowSpinner">Show</button> 
<button class="e-btn" @onclick="@HideSpinner">Hide</button> 
<div id="container" style="height:600px; position: relative"></div> 
  
@code{  
    [Inject] 
    IJSRuntime jsRuntime { get; set; } 
 
    object option = new { targetId = "container" }; 
 
    private async void ShowSpinner(Object args) 
    { 
        await JsInterop.CreateSpinner<string>(jsRuntime, this.option); 
        await JsInterop.ShowSpinner<string>(jsRuntime, this.option); 
    } 
    private async void HideSpinner(UIMouseEventArgs args) 
    { 
        await JsInterop.HideSpinner<string>(jsRuntime, this.option); 
    } 
}  
 
 
 
JsInterop.cs  
 
public class JsInterop  
    {  
  
        public static Task<T> CreateSpinner<T>(IJSRuntime JSRuntime, object args)  
        {  
            try  
            {  
                return JSRuntime.InvokeAsync<T>("jsInterop.createSpinner", args); // Invoke createSpinner javascript function  
            }  
            ….  
       }  
  
        public static Task<T> ShowSpinner<T>(IJSRuntime JSRuntime, object args)  
        {  
            try  
            {  
                return JSRuntime.InvokeAsync<T>("jsInterop.showSpinner", args); // Invoke showSpinner javascript function  
            }  
            …..  
        }  
  
        public static Task<T> HideSpinner<T>(IJSRuntime JSRuntime, object args)  
        {  
            try  
            {  
                return JSRuntime.InvokeAsync<T>("jsInterop.hideSpinner", args); // Invoke hideSpinner javascript function  
            }  
          ………  
        }  
}  
 
 
 
jsinterop.js  
 
window.jsInterop = {  
    createSpinner: function (option) {   
        try {  
            var target = document.getElementById(option.targetId);  
            ejs.popups.createSpinner({ target: target }) // Pass the target and created spinner  
        }  
        …..  
   },  
  
    showSpinner: function (option) {  
        try {  
            var target = document.getElementById(option.targetId);   
            ejs.popups.showSpinner(target) // Show spinner  
        }  
        …….  
    },  
    hideSpinner: function (option) {  
        try {  
            var target = document.getElementById(option.targetId);  
            ejs.popups.hideSpinner(target)  // Hide spinner  
        }  
      …….  
  },  
}  
 
 
  
In above sample, we have covered below things,  
  • Invokes the CreateSpinner function using JsRuntime, when click the Show button and we shown the spinner using ShowSpinner method
  • Hide it by using Hide button click by calling HideSpinner method.
 
Regards, 
Pandiyaraj M 



NO Noufal January 7, 2020 08:52 PM

Hi There!

Can you convert this Spinner application to asp.net core 3.1. Its not compiling.


IS Indrajith Srinivasan Syncfusion Team January 8, 2020 05:20 AM

Hi Noufal, 
 
Greetings from Syncfusion support 
 
We have converted the application with asp.net core 3.1, also we have implemented the Spinner as a component from 17.2.52-beta version,  you can now directly use it without going for JS interop concept in Blazor. 
 
Could you please try out the above solution and please revert us if you face any difficulties. 
  
Regards, 
Indrajith

Loader.
Live Chat Icon For mobile
Up arrow icon