> For the complete documentation index, see [llms.txt](https://docs-siticoneframework.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/progress-and-loading/siticone-loadingspinner/appearance-and-visual-customization.md). # Appearance & Visual Customization This feature allows developers to tailor the visual aspects of the spinner, including its colors, gradients, glow, spoke, ring, and center dot settings, to seamlessly integrate with their application. ## Overview The Appearance & Visual Customization feature in the SiticoneLoadingSpinner control enables developers to modify the spinner's look and feel. Developers can adjust primary and gradient colors, enable glow effects, reverse rotation direction, and customize the design of rings and spokes. These properties help ensure that the spinner’s design matches the application's overall theme and provides the desired visual impact. *** ### Detailed Appearance Settings The table below summarizes the key properties that affect the spinner’s appearance along with their descriptions, valid values, and default settings. | Property / Setting | Description | Valid Values / Defaults | | ---------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------- | | SpinnerColor | Sets the primary color of the spinner’s spokes and center dot. | Color (default: Color.DodgerBlue) | | GradientEnabled | Enables a gradient effect across the spinner’s spokes. | Boolean (default: false) | | GradientColor | Defines the secondary color used when gradient mode is enabled. | Color (default: Color.White when enabled) | | GlowEffect | Enables an outer glow around the spinner. | Boolean (default: false) | | GlowIntensity | Adjusts the intensity (spread) of the glow effect around the spinner. | Integer (range 0–20, default: 5) | | ReverseDirection | Reverses the direction of the spinner’s rotation, which can impact the visual flow of the animation. | Boolean (default: false) | | NumberOfSpokes | Determines the number of spokes drawn in each ring of the spinner. | Integer (min: 2, max: 36, default: 12) | | SpokeThickness | Sets the thickness of each individual spoke. | Integer (range 1–10, default: 2) | | FadeSpokes | Enables a fading effect on individual spokes, enhancing the visual depth. | Boolean (default: true) | | ShowCenterDot | Toggles the display of a central dot on the spinner. | Boolean (default: false) | | CenterDotRadius | Sets the radius of the center dot relative to the inner circle. | Integer (default: 3, must be ≤ InnerCircleRadius) | | NumberOfRings | Determines the number of concentric rings drawn by the spinner. | Integer (min: 1, max: 5, default: 1) | | RingSpacing | Adjusts the spacing between concentric rings. | Float (range 0.5 to 1.5, default: 0.8) | | AlternateRingDirection | Alternates the drawing direction of each ring for a more dynamic visual effect. | Boolean (default: false) | | FadeRings | Enables a fading effect on the rings, allowing for subtle opacity changes across rings. | Boolean (default: false) | | RingFadeIntensity | Controls how quickly the ring’s opacity fades across concentric rings. | Integer (range 0–100, default: 20) | *** ### Code Examples & Integration Samples #### Changing the Spinner's Primary Colors and Glow Customize the spinner’s color and add a glow effect: ```csharp var spinner = new SiticoneLoadingSpinner(); // Set the primary color of the spinner. spinner.SpinnerColor = Color.MediumPurple; // Enable gradient effect and define the secondary gradient color. spinner.GradientEnabled = true; spinner.GradientColor = Color.Lavender; // Enable glow and set its intensity. spinner.GlowEffect = true; spinner.GlowIntensity = 10; // Start the spinner. spinner.Start(); ``` #### Customizing the Spokes and Center Dot Alter the appearance of spokes and enable a center dot for a unique visual: ```csharp var spinner = new SiticoneLoadingSpinner(); // Customize the spokes. spinner.NumberOfSpokes = 16; spinner.SpokeThickness = 3; spinner.FadeSpokes = true; // Reverse the rotation direction for a different effect. spinner.ReverseDirection = true; // Enable and customize the center dot. spinner.ShowCenterDot = true; spinner.CenterDotRadius = 4; spinner.Start(); ``` #### Adjusting Ring Settings Configure the spinner to display multiple rings with spacing and fading effects: ```csharp var spinner = new SiticoneLoadingSpinner(); // Set up multiple concentric rings. spinner.NumberOfRings = 3; spinner.RingSpacing = 1.0f; spinner.AlternateRingDirection = true; spinner.FadeRings = true; spinner.RingFadeIntensity = 30; spinner.Start(); ``` *** ### Key Points | Key Aspect | Details | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Color Customization | SpinnerColor and GradientColor allow for primary and gradient color adjustments to match the app design. | | Glow and Effects | GlowEffect and GlowIntensity provide an additional visual layer that can enhance the spinner's appeal. | | Spoke and Ring Settings | NumberOfSpokes, SpokeThickness, and FadeSpokes control the look of the spinner’s moving parts, while ring settings refine the overall structure. | | Center Dot Display | ShowCenterDot and CenterDotRadius offer an optional central focus point for additional style. | *** ### Best Practices | Best Practice | Recommendation | | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | Maintain Consistency | Ensure that the chosen colors and effects match your application's overall color scheme and design language. | | Test on Different Resolutions | Verify that glow and gradient effects render well on various screen sizes and resolutions. | | Optimize for Performance | Use glow and gradient effects judiciously, as they may impact rendering performance on lower-end hardware. | | Use Default Values as a Starting Point | Start with the default values provided by the control and adjust gradually to achieve the desired look without over-customization. | *** ### Common Pitfalls | Common Issue | Explanation & Resolution | | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | Overuse of Glow/Gradient Effects | Excessive glow or gradient settings can distract from the primary content; use subtle values to maintain balance. | | Mismatched Colors | Inconsistent use of SpinnerColor and GradientColor may result in a jarring visual effect; ensure colors are complementary. | | Inadequate Testing on Different Displays | Visual customization might look different on various displays; test the spinner under multiple conditions. | | Ignoring Spoke and Ring Ratio | Over-customizing spokes or rings (e.g., too many spokes or extremely thin rings) can reduce readability and visual appeal. | *** ### Usage Scenarios | Scenario | Description & Sample Code | | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Themed Application Integration | Use custom colors and gradients to ensure the spinner blends seamlessly with your application’s branding. | | Attention-Grabbing Status Indicator | Enable glow and reverse rotation to create a visually striking spinner during critical application events. | | Detailed Progress Display | Combine center dot and faded spokes with multiple rings to provide a nuanced visual cue during long-running operations. | | Minimalistic Design | Use default spinner colors with subtle modifications (e.g., a slight gradient) for a clean, modern look. | *** ### Review The Appearance & Visual Customization feature is essential for adapting the SiticoneLoadingSpinner control to match the visual style of any .NET WinForms application. With extensive options to adjust colors, gradients, glow effects, spoke, ring, and center dot configurations, developers have the flexibility to create a spinner that not only indicates progress effectively but also enhances the overall aesthetic of the application. Careful tuning of these properties, in line with best practices, will result in a balanced and visually appealing control. *** ### Summary Appearance & Visual Customization in the SiticoneLoadingSpinner control empowers developers to modify the visual elements of the spinner, including primary colors, gradients, glow effects, spoke and ring settings, and center dot display. These customizable properties ensure that the spinner can be styled to align with the application’s design while maintaining functionality and performance. By following best practices and avoiding common pitfalls, developers can create a visually coherent and engaging user experience. *** ### Additional Tips | Tip | Recommendation | | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Use Consistent Branding | Match the spinner’s colors and effects with your application's branding for a cohesive look. | | Leverage Batch Configuration | Utilize the Configure() method to set appearance properties in one call, reducing multiple UI refreshes and ensuring consistency. | | Preview Changes Incrementally | Make incremental changes and test on actual devices or different screen resolutions to fine-tune the visual presentation. | | Document Custom Appearance Settings | Clearly comment your custom appearance settings in code to facilitate future maintenance and consistency across different parts of the application. | This comprehensive documentation for the Appearance & Visual Customization feature should enable developers to integrate and style the SiticoneLoadingSpinner control effectively within their .NET WinForms applications.