• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

Appearance

The Loader provides a set of predefined appearance options such as various animation types, sizes, and theme colors.

Loader Type

The Loader allows you to set different animations by using the type input property.

The available type values are:

  • pulsing (Default)—Applies a pulsing animation to the Loader.
  • infinite-spinner—Applies an infinite-spinner animation to the Loader.
  • converging-spinner—Applies a converging-spinner animation to the Loader.
Example
View Source
Change Theme:

Theme Color

The Loader allows you to specify predefined theme colors.

The available themeColor values are:

  • primary (Default)—Applies coloring based on the primary theme color.
  • secondary—Applies coloring based on the secondary theme color.
  • tertiary— Applies coloring based on the tertiary theme color.
  • info—Applies coloring based on the info theme color.
  • success— Applies coloring based on the success theme color.
  • warning— Applies coloring based on the warning theme color.
  • error— Applies coloring based on the error theme color.
  • dark— Applies coloring based on the dark theme color.
  • light— Applies coloring based on the light theme color.
  • inverse— Applies coloring based on the inverted theme color.
Example
View Source
Change Theme:

Size

The Loader allows you to set different sizes.

The available size values are:

  • small
  • medium (Default)
  • large
Example
View Source
Change Theme:

In this article

Not finding the help you need?