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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Progress Bar/Spinner

Thread ID:

Created:

Updated:

Platform:

Replies:

146809 Aug 20,2019 10:04 PM UTC Jan 8,2020 01:20 PM UTC Blazor 3
loading
Tags: Progress Button
Raul
Asked On August 20, 2019 10:04 PM UTC

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?

Pandiyaraj Muniyandi [Syncfusion]
Replied On August 21, 2019 01:07 PM UTC

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 


Noufal
Replied On January 8, 2020 04:52 AM UTC

Hi There!

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

Indrajith Srinivasan [Syncfusion]
Replied On January 8, 2020 01:20 PM UTC

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon