# Loading Indicator ## Overview The Loading Indicator feature integrates a spinner animation into the SiticoneTileButton control. When activated, the loading indicator rotates over the button’s face, alerting users to background tasks such as data fetching or processing. The spinner's appearance, including its color, can be customized to match the application's design requirements. *** #### Feature Properties Table | Property Name | Type | Default Value | Description | | ------------- | ----- | ------------- | -------------------------------------------------------------------------------------------------- | | IsLoading | bool | false | Controls the visibility of the loading spinner overlay on the button. | | LoadingColor | Color | Color.White | Sets the color of the loading spinner, ensuring it contrasts well against the button’s background. | *** #### Key Points | Aspect | Details | | -------------------- | -------------------------------------------------------------------------------------------------------------- | | Visual Feedback | The loading indicator provides immediate visual feedback that a background operation is in progress. | | Customizable Display | Developers can control both the activation (IsLoading) and the appearance (LoadingColor) of the spinner. | | Integrated Animation | The spinner rotates smoothly based on an internal timer, ensuring consistent performance across state changes. | *** #### Best Practices | Practice | Explanation | | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | Use IsLoading judiciously | Activate the loading indicator only during genuine background processes to avoid confusing users. | | Choose a contrasting LoadingColor | Ensure the spinner is clearly visible by selecting a color that stands out against the button’s base and hover colors. | | Reset the loading state when processes complete | Always disable IsLoading once the background operation has finished to restore normal button functionality. | | Test responsiveness across devices | Verify that the spinner animation performs smoothly on different hardware configurations and screen resolutions. | *** #### Common Pitfalls | Pitfall | Recommendation | | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | Leaving the spinner active indefinitely | Ensure that IsLoading is properly set to false after processes complete to prevent user confusion. | | Poor color contrast for the loading spinner | Select a LoadingColor that provides clear visibility against the button’s background, particularly when using gradient effects. | | Overlapping animations | If multiple animations are used concurrently (such as ripple effects and loading indicators), test for visual and performance conflicts. | *** #### Usage Scenarios | Scenario | Description | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | Data Fetching Operations | Display the loading indicator on a button that initiates a data request to inform users of the ongoing operation. | | Form Submission or Processing | Use the spinner overlay on submission buttons to signal that the form data is being processed. | | Content Refresh Actions | Indicate that content is being refreshed by activating the loading indicator on interactive buttons in dashboards or lists. | *** #### Code Examples **Example 1: Basic Loading Indicator Integration** This example demonstrates how to integrate the loading indicator with default settings. The spinner appears when a background operation is simulated. ```csharp using System; using System.Drawing; using System.Threading.Tasks; using System.Windows.Forms; using SiticoneNetFrameworkUI; namespace LoadingIndicatorDemo { public class MainForm : Form { public MainForm() { // Initialize the SiticoneTileButton with a loading indicator var loadingButton = new SiticoneTileButton { Text = "Load Data", Size = new Size(220, 150), Location = new Point(50, 50), // Loading Indicator settings IsLoading = false, LoadingColor = Color.White, // Color settings to contrast with the loading spinner BaseColor = Color.FromArgb(50, 150, 215), HoverColor = Color.FromArgb(70, 170, 235) }; // Simulate a background operation on click loadingButton.Click += async (s, e) => { loadingButton.IsLoading = true; // Simulate a delay (e.g., data fetching) await Task.Delay(3000); loadingButton.IsLoading = false; }; Controls.Add(loadingButton); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new MainForm()); } } } ``` **Example 2: Customized Loading Indicator Appearance** This example shows how to customize the loading spinner's color to suit a dark-themed application. ```csharp using System; using System.Drawing; using System.Threading.Tasks; using System.Windows.Forms; using SiticoneNetFrameworkUI; namespace CustomizedLoadingIndicatorDemo { public class MainForm : Form { public MainForm() { // Initialize the SiticoneTileButton with a customized loading indicator var darkThemeButton = new SiticoneTileButton { Text = "Submit", Size = new Size(220, 150), Location = new Point(30, 30), // Customized Loading Indicator settings IsLoading = false, LoadingColor = Color.Yellow, // Bright color for dark background // Dark-themed color settings BaseColor = Color.FromArgb(30, 30, 30), HoverColor = Color.FromArgb(50, 50, 50) }; // Simulate a processing operation on click darkThemeButton.Click += async (s, e) => { darkThemeButton.IsLoading = true; // Simulate a delay (e.g., processing submission) await Task.Delay(2500); darkThemeButton.IsLoading = false; }; Controls.Add(darkThemeButton); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new MainForm()); } } } ``` *** #### Review | Aspect | Review Comments | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | Visual Feedback | The loading indicator effectively communicates that a background process is running, enhancing user confidence. | | Customizability | With properties such as IsLoading and LoadingColor, the spinner can be easily adapted to various design requirements. | | Integration Simplicity | The feature is straightforward to integrate via property assignments and event handlers, making it accessible even for novice developers. | *** #### Summary The Loading Indicator feature of the SiticoneTileButton control provides a valuable visual cue that a process is underway. By setting the IsLoading property to true, a rotating spinner overlay appears on the button, with its color customizable through the LoadingColor property. This feature improves user experience by clearly indicating when the application is processing information, and it is especially useful for data fetching, form submissions, or any operation that requires a brief waiting period. *** #### Additional Resources | Resource Category | Description | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | | Integration Tips | Refer to the provided code examples to understand how to enable and control the loading indicator in your application. | | UI/UX Considerations | Ensure the loading indicator is used only when necessary and that its color provides sufficient contrast against the button’s background. | | Performance Optimization | Test the loading indicator on various hardware configurations to ensure smooth animations without affecting application performance. | *** By following these guidelines and examples, developers can seamlessly integrate and customize the Loading Indicator feature of the SiticoneTileButton control, thereby enhancing the responsiveness and interactivity of their .NET WinForms applications. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/buttons-and-elements/siticone-tilebutton/loading-indicator.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.