Loading distractor

loading spinner distractor

Introduction

The loading distractor indicates a saving or loading action.

Loading...

View in Groundhog

It consists of a loading spinner and a description.

Styleguide

Loading distractor distances

x: 28px
y: 16px

Loading distractor green elements

Loading spinner

Lime green logo color

Copy svg from groundhog and scale proportionally

width: 28px
height: 28px
stroke-width: 4px

Text

Lime green logo color #b4dc00

font-family: Bernina Sans Light
font-weight: 300
font-size: 18px
verticl-align: center

Field

width: depends on text length
height: 50px
border: 1px solid $gray-900
border-radius: 3px
background-color: $gray-900
opacity: 65%

Behavior

The loading distractor appears always vertically and horizontally centered on the element, section or screen it is loading. It is blocking all user input of the loaded object or view.

Animation

The loading distractor is animated in two parts. The whole loading spinner is rotating and the stroke length is animated as well.

Animation of the whole spinner

animation: rotate
duration: 3.4s
timing: linear

Animation of the stroke

animation: dash offset
duration: 1.7s
timing: cubic-bezier(0.645, 0.045, 0.355, 1)

Combination with other components

Loading distractor in input fields

Loading distractor in input fields

Distances

x: 12px

Loading distractor

Copy svg from groundhog and scale proportionally

width: 12px
height: 12px
color: $gray-500

Loading distractor in buttons

If loading is caused by triggering a button, the loading distractor can be shown in the button. The button gets disabled and the loading distractor is placed left aligned in the button with a description.

Loading distractor in button

Distances

x: 16px
y: 8px

Loading distractor

width: 16px
height: 16px
color: same as disabled button font

Loading distractor in comboboxes

Loading distractor in comboboxes

Distances

x: 12px

Loading distractor

width: 12px
height: 12px
color: $gray-500