Customizing the Constellation Loading Indicator: A Simple CSS Approach

User Experience Knowledge Share
1

The Constellation design system provides a clean, out-of-the-box user experience, but sometimes you need to inject your own branding or style. This article shows you how to easily replace the default loading indicator with a custom one using a minimal CSS-based technique.

Requirements for the custom loader

Constellation imposes strict but simple requirements for the custom loading indicator to ensure performance and proper rendering:

  • Single Element DOM: The loading indicator’s structure must be limited to a single <div> element. Nested elements are not permitted.

  • Compact Size: The visual shape should be a square with a maximum width and height of 32px.

These constraints mean you must rely entirely on CSS—specifically borders, gradients, box-shadows, and CSS animations—to create the visual effect.

Finding Your Custom Loader

Creating a complex, single-element loader from scratch can be challenging. Fortunately, many resources provide excellent, constraint-compliant examples.

Pro-Tip: Once you find a suitable loader, you will only need to copy the CSS portion; the HTML is simply a single <div>.

Implementation: Overriding the Default CSS

To implement your custom loader, you need to override the default CSS rules within the Constellation platform. This is done by adding a custom stylesheet to your application’s framework.

Step 1: Access the Platform CSS File

Constellation allows you to add custom CSS to your application, which is the perfect place to inject your override.

Step 2: Define the Custom Loader CSS

The Constellation loading indicator is a div with the role ‘progressbar’. You need to target this element and apply your new styles.

  • Target Selector: The element that you need to target is div[role=“progressbar”]

  • Example Override Structure:

CSS

/* We are hiding the default loader */
div[role="progressbar"] > svg { display: none; }

div[role="progressbar"] {
    /* 1. Reset and Constraints */
    width: 30px !important;    /* Square: W <= 32px */
    height: 30px !important;   /* Square: H <= 32px */
    margin: 0 !important;      /* Ensure proper positioning override */
    background: none !important; /* Clear any default background */
    
    /* 2. Spinner Appearance */
    border: 3px solid #f3f3f3;       /* Light grey track for the spinner */
    border-top: 3px solid #E94B35; /* Colored spinning segment */
    border-radius: 50%;              /* Makes it a circle */
    
    /* 3. Animation */
    animation: custom-spin 1s linear infinite;
}

/* Define the Animation Keyframes */
@keyframes custom-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

By placing your chosen single-element CSS code within the CSS selector, you effectively replace the default indicator with your custom, branded experience.

Here is an example of the custom loader

example.png
example.png1491×810 58 KB

Constellation 101 Series

Enjoyed this article? See more similar articles in Constellation 101 series.