Loading

A loading indicator alerts a user to wait for an activity to complete.

Introduction

Getting Started Colors Responsive Utilities

Layout

Container Control Grid Wrap

Form

Button Checkbox Fieldset File Input Radio Select Selection Switch

Paragraphy

Box Content Divider Header Quote Text

Feedback

Blankslate Gauge Loading Mask Notice Procedure Progress Snackbar

Interaction

Accordion Dropdown Modal Popover Tooltip

Media

Flag Icon Iconset Image Imageset

Data

Badge Checklist Chip Close Conversation List Meta Rating Statistic Table Timeline

Navigation

Breadcrumb Menu Pagination Tab

Application

App Center App Drawer App Layout App Navbar App Sidebar App Topbar

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-loading"></div>

Variations

Notched

A loading indicator can be styled as a notched circle.

<div class="ts-loading is-notched"></div>

Centered

A loading indicator can be centered.

<div class="ts-loading is-centered"></div>

Sizes

A loading indicator can have different sizes.

<div class="ts-loading is-small"></div>
<div class="ts-loading"></div>
<div class="ts-loading is-large"></div>

Looking for similar components?

Progress

Variations

Notched is-notched Centered is-centered Sizes is-small

GitHub Getting Started Components Examples

Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.

Translators: Yami Odymel