Skip to main content Skip to navigation
View Navigation Comet

Loading Spinners

Provide visual feedback that the system is processing a request within a component or page layout.

Loading a Single Component

Avoid using a message when displaying a spinner within a single component such as a TEI or embedded video.

  • Do Image

    use a spinner icon, scaled proportionally to the size of the missing content.

  • Do Image

    use spinner messages within an individual component. Instead, rely on just the spinner.

Inline Message

Use a spinner inline message to illustrate additional rows of content loading, such as search results.

Figure: Example spinner while more rows load

Small Inline Spinner

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-spinner comet-spinner--small comet-spinner--on-light">
    <svg class="comet-spinner__icon" aria-labelledby="title" viewBox="-10 -10 220 220">
        <title>Loading More...</title>
        <defs>
            <linearGradient id="spinner-color-1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity="0" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".2" />
            </linearGradient>
            <linearGradient id="spinner-color-2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".2" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".4" />
            </linearGradient>
            <linearGradient id="spinner-color-3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".4" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".6" />
            </linearGradient>
            <linearGradient id="spinner-color-4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".6" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".8" />
            </linearGradient>
            <linearGradient id="spinner-color-5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".8" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity="1" />
            </linearGradient>
            <linearGradient id="spinner-color-6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity="1" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity="1" />
            </linearGradient>
        </defs>
        <circle fill="#7B869D" cx="45%" cy="0" r="7.5" />
        <g fill="none" stroke-width="20" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#spinner-color-1)" />
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#spinner-color-2)" />
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#spinner-color-3)" />
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#spinner-color-4)" />
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#spinner-color-5)" />
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#spinner-color-6)" />
        </g>
    </svg>
    <p class="comet-spinner__text comet-spinner__text--inline">Loading More...</p>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.spinner(size = "small", content="Loading More...", content_type="inline") }}
                
Macro params reference

Only the small inline spinner is recommended. We retained the comet-spinner--small in order to match the naming convention in other variations.

Stacked Message

Use a spinner stacked message to illustrate a large content area loading, such as a board or a classroom. Proportionally vary the scale of the spinner to fit the scale of the missing content.

Figure: Example spinner while content loads

Large Stacked Spinner

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-spinner comet-spinner--large comet-spinner--on-light">
    <svg class="comet-spinner__icon" aria-labelledby="title" viewBox="-10 -10 220 220">
        <title>Loading Images</title>
        <defs>
            <linearGradient id="spinner-color-1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity="0" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".2" />
            </linearGradient>
            <linearGradient id="spinner-color-2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".2" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".4" />
            </linearGradient>
            <linearGradient id="spinner-color-3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".4" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".6" />
            </linearGradient>
            <linearGradient id="spinner-color-4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".6" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".8" />
            </linearGradient>
            <linearGradient id="spinner-color-5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".8" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity="1" />
            </linearGradient>
            <linearGradient id="spinner-color-6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity="1" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity="1" />
            </linearGradient>
        </defs>
        <circle fill="#7B869D" cx="45%" cy="0" r="7.5" />
        <g fill="none" stroke-width="20" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#spinner-color-1)" />
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#spinner-color-2)" />
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#spinner-color-3)" />
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#spinner-color-4)" />
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#spinner-color-5)" />
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#spinner-color-6)" />
        </g>
    </svg>
    <h3 class="comet-spinner__text">Loading Images</h3>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.spinner(size = "large", content="Loading Images") }}
                
Macro params reference

Medium Stacked Spinner

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-spinner comet-spinner--medium comet-spinner--on-light">
    <svg class="comet-spinner__icon" aria-labelledby="title" viewBox="-10 -10 220 220">
        <title>Loading Images</title>
        <defs>
            <linearGradient id="spinner-color-1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity="0" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".2" />
            </linearGradient>
            <linearGradient id="spinner-color-2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".2" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".4" />
            </linearGradient>
            <linearGradient id="spinner-color-3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".4" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".6" />
            </linearGradient>
            <linearGradient id="spinner-color-4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".6" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".8" />
            </linearGradient>
            <linearGradient id="spinner-color-5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".8" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity="1" />
            </linearGradient>
            <linearGradient id="spinner-color-6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity="1" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity="1" />
            </linearGradient>
        </defs>
        <circle fill="#7B869D" cx="45%" cy="0" r="7.5" />
        <g fill="none" stroke-width="20" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#spinner-color-1)" />
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#spinner-color-2)" />
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#spinner-color-3)" />
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#spinner-color-4)" />
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#spinner-color-5)" />
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#spinner-color-6)" />
        </g>
    </svg>
    <p class="comet-spinner__text">Loading Images</p>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.spinner(size = "medium", content="Loading Images") }}
                
Macro params reference

###Small Stacked Spinner

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-spinner comet-spinner--small comet-spinner--on-light">
    <svg class="comet-spinner__icon" aria-labelledby="title" viewBox="-10 -10 220 220">
        <title>Loading Images</title>
        <defs>
            <linearGradient id="spinner-color-1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity="0" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".2" />
            </linearGradient>
            <linearGradient id="spinner-color-2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".2" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".4" />
            </linearGradient>
            <linearGradient id="spinner-color-3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".4" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".6" />
            </linearGradient>
            <linearGradient id="spinner-color-4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".6" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity=".8" />
            </linearGradient>
            <linearGradient id="spinner-color-5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity=".8" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity="1" />
            </linearGradient>
            <linearGradient id="spinner-color-6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
                <stop offset="0%" stop-color="#7B869D" stop-opacity="1" />
                <stop offset="100%" stop-color="#7B869D" stop-opacity="1" />
            </linearGradient>
        </defs>
        <circle fill="#7B869D" cx="45%" cy="0" r="7.5" />
        <g fill="none" stroke-width="20" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#spinner-color-1)" />
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#spinner-color-2)" />
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#spinner-color-3)" />
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#spinner-color-4)" />
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#spinner-color-5)" />
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#spinner-color-6)" />
        </g>
    </svg>
    <p class="comet-spinner__text">Loading Images</p>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.spinner(size = "small", content="Loading Images") }}
                
Macro params reference

Overlay

Use a spinner with an overlay when “swapping” content on the screen, or loading a new page. Always include a stacked message with an overlay spinner.

  • Do Image

    use an overlay spinner when swapping content on the screen.

  • Do Image

    include a stacked message with an overlay spinner.

  • Display a spinner on top of content above an overlay.
  • Pair an overlay with the inverted white spinner and white text.
  • Never use an overlay when loading additional content into / at the base of an existing layout.

Color

Loading Spinner has light and dark themes to provide contrast against a variety of background colors.

Default

Use default gray spinner on top of white $comet-background-color-default and light gray $comet-background-color-light backgrounds

Reversed

Use a white spinner on top of dark $comet-background-color-dark and product-themed background colors.

Guidelines

For loading spinners that include a message, do not exceed 30 characters.

  • Do Image

    use a verb + noun pairing like 'Creating Classroom…' or 'Saving Changes…'

  • Do Image

    use overly generic or uninformative messaging.

Class Reference

Class Applies to Outcome

.comet-spinner

<div>

Initializes an element to contain base spinner styles. Must be modified by size and color variation classes.

.comet-spinner--large

.comet-spinner

Sets the size variation to large. Select a size appropriate for the space the spinner occupies.

.comet-spinner--medium

.comet-spinner

Sets the size variation to medium. Select a size appropriate for the space the spinner occupies.

.comet-spinner--small

.comet-spinner

Sets the size variation to small. Select a size appropriate for the space the spinner occupies.

.comet-spinner--on-dark

.comet-spinner

Sets the color theme for a dark background.

.comet-spinner--on-light

.comet-spinner

Sets the color theme for a light background.

.comet-spinner__icon

<svg>

Identifies the spinner icon.

.comet-spinner__text

<p> or <h3>

Applies spinner color theming to the optional label. Defaults to the stacked variation. Use h3 in large variation only.

.comet-spinner__text--inline

.comet-spinner__text

Displays the inline label style, overriding the default stacked layout by placing the label to the right of the spinner icon.

Macro Params Reference

Param Default Values Description

type

on-light (default)

on-dark

Sets the color theme variation.

content

False (default)

String

Sets the label text. Set false or leave blank for no label.

content_type

block (default)

inline

Sets the label layout variation. Stacked messages = block.

size

large
medium
small

Sets the size variation

size

False (default)

Includes additional modifier classes for product-specific overrides.

Copyright © 2018 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.

Jump to page content
Navigation Menu

Comet

v2.44.1