Animation Classes
Trongate CSS includes built-in animations for both loading indicators and attention-grabbing effects. These animations help provide visual feedback and draw user attention to important elements.
Loading Spinner
The loading spinner animation is created using the .spinner class. This creates a rotating circular indicator perfect for loading states.
Spinner Variations
The spinner can be aligned differently using additional classes:
Left-Aligned Spinner
Center-Aligned Spinner
Right-Aligned Spinner
Common Use Cases for Spinners
Spinner elements often appear when content is being loaded via Ajax requests. Often, they'll be used inside dynamic modal elements or card elements, like so:
Customizing Spinners
By default, the spinner uses your primary theme color. However, you can create custom spinners with different colors, sizes, and animation speeds using CSS.
Different Colors
To change a spinner's color, override the border color in your CSS:
Custom Sizes and Thicknesses
You can modify the size and border thickness of spinners:
Animation Speed
Customize the animation speed by modifying the animation duration:
When customizing spinners, remember to always keep the border-right-color and border-top-color as transparent to maintain the spinning effect. Also, ensure sufficient contrast against your background for visibility.
Attention Effects
The .blink class provides a blinking animation effect to draw attention to important elements.
This text will blink to grab attention
Combining Effects
Loading and attention effects can be combined with other Trongate CSS classes to create more complex UI patterns:
- Use spinners to indicate loading states or processing actions.
- Apply the blink effect sparingly and only for truly important notifications.
- Consider accessibility implications when using attention-grabbing animations.
- Combine with appropriate text to provide context for the animation.
- Test animations across different browsers to ensure consistent behavior.
Success & Failure Animations
Trongate MX includes success animations and error animations, which are automatically rendered after HTTP requests are triggered by Trongate MX. Click the button below to see a demonstration of how 'success' or 'error' animations respond to user feedback.
Details about how this functionality works is beyond the scope of Trongate CSS documentation. However, we recommend exploring the Trongate MX Documentation for comprehensive details on this feature. In particular, we suggest reviewing the section on UI Enhancements.