extends /default.pug

block styles
  link(href='node_modules/ladda/dist/ladda-themeless.min.css', rel='stylesheet')

block scripts
  // Plugins and scripts required by this view
  script(src='node_modules/ladda/dist/spin.min.js')
  script(src='node_modules/ladda/dist/ladda.min.js')
  script(src='js/loading-buttons.js')

block view
  .animated.fadeIn
    .card
      .card-header
        i.icon-cursor
        |  Loading buttons - Ladda
        a.badge.badge-danger(href='https://coreui.io/pro/') CoreUI Pro Component
        .card-header-actions
          a.card-header-action(href='https://github.com/hakimel/Ladda', target='_blank')
            small.text-muted docs
      .card-body
        p
          | A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.
        .row.text-center
          .col-md-3.py-4
            h6 expand-left
            button.btn.btn-success.btn-ladda(data-style='expand-left') Submit
          .col-md-3.py-4
            h6 expand-right
            button.btn.btn-success.btn-ladda(data-style='expand-right') Submit
          .col-md-3.py-4
            h6 expand-up
            button.btn.btn-success.btn-ladda(data-style='expand-up') Submit
          .col-md-3.py-4
            h6 expand-down
            button.btn.btn-success.btn-ladda(data-style='expand-down') Submit
          .col-md-3.py-4
            h6 contract
            button.btn.btn-danger.btn-ladda(data-style='contract') Submit
          .col-md-3.py-4
            h6 contract-overlay
            button.btn.btn-danger.btn-ladda(data-style='contract-overlay', style='z-index: 10;') Submit
          .col-md-3.py-4
            h6 zoom-in
            button.btn.btn-danger.btn-ladda(data-style='zoom-in') Submit
          .col-md-3.py-4
            h6 zoom-out
            button.btn.btn-danger.btn-ladda(data-style='zoom-out') Submit
          .col-md-3.py-4
            h6 slide-left
            button.btn.btn-info.btn-ladda(data-style='slide-left') Submit
          .col-md-3.py-4
            h6 slide-right
            button.btn.btn-info.btn-ladda(data-style='slide-right') Submit
          .col-md-3.py-4
            h6 slide-up
            button.btn.btn-info.btn-ladda(data-style='slide-up') Submit
          .col-md-3.py-4
            h6 slide-down
            button.btn.btn-info.btn-ladda(data-style='slide-down') Submit
        hr.my-4
        h4.text-center Built-in progress bar
        .row.text-center
          .col-md-3.py-4.offset-md-3
            h6 expand-right
            button.btn.btn-warning.btn-ladda-progress(data-style='expand-right') Submit
          .col-md-3.py-4
            h6 contract
            button.btn.btn-warning.btn-ladda-progress(data-style='contract') Submit
        hr.my-4
        h4.text-center Sizes
        .row.text-center
          .col-md-4.py-4
            h6 Small
            button.btn.btn-sm.btn-primary.btn-ladda(data-style='expand-right') Submit
          .col-md-4.py-4
            h6 Normall
            button.btn.btn-primary.btn-ladda(data-style='expand-right') Submit
          .col-md-4.py-4
            h6 Large
            button.btn.btn-lg.btn-primary.btn-ladda(data-style='expand-right') Submit