extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'loading'
  - var parent = 'utilities'
  - var title = 'Loading - Utilities - Spectre.css CSS Framework'
  - var description = 'Loading indicator is used for loading or updating. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('loading', 'Loading')
    include ../_layout/_ad-g.pug

    p
      | Loading indicator is used for loading or updating.
      | You can add the #[code loading] class to a container for loading status.

    .docs-demo.columns
      .column.col-12.text-center
        .loading

    p
      | Add the #[code loading-lg] class for large size.

    .docs-demo.columns
      .column.col-12.text-center
        .loading.loading-lg

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- loading element -->
          <div class="loading"></div>
          <div class="loading loading-lg"></div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug