Updated on 16 July 2018
Docs are work in progress, check open issues and see how you can help!
Loader component is used to indicate current status in the UI for various scenarios: when submitting forms, loading data, doing time consuming calculations, etc. It is a way to show users what is currently going on.
Loader size directly corresponds to
By default loaders are used as inline elements that can appear almost anywhere. They do not obstruct the whole page/screen, but indicate that some part of the screen/page is loading. For example, such loader can appear at the bottom of the feed to indicate that more items will be loaded.
Lifted loader is used when it is supposed to overlay content, for example, for large page sections or full screen views.
Lifted Loader component sometimes has states indicating
Success state is visible, once the loading process ends successfully.
Error state is visible, once the loading process ends unsuccessfully.
Loader can technically accept any theme from the defined Vinted Theme set, yet by default
primary theme is used. When no theme is passed,
$loader-state-loading-color is used. Using loaders without theme can be beneficial when combined with, for example, Button component.
Loader consists of 3 main parts: containing box (view box), stroke (transparent circle with a border/stroke of specified stroke width) and padding. This implies that the size of the loader (circle) is smaller than the containing box, because we have to account for the specified padding.
Loader animation consists of 2 different motions: loader circle rotation and circle stroke fill percentage (alternatively, path trimming). Stroke fill starts at
12 o'clock position.
Both motions start at the same time and the whole animation is keyframed into 3 distinct points:
50% (middle) and
// Sizes $loader-sizes: ( small: ( size: unit(3), padding: unit(0.25), thickness: unit(0.5), ), medium: ( size: unit(4), padding: unit(0.25), thickness: unit(0.5), ), default: ( size: unit(6), padding: unit(0.5), thickness: unit(0.5), ), large: ( size: unit(8), padding: unit(0.5), thickness: unit(0.75), ), x-large: ( size: unit(12), padding: unit(1), thickness: unit(1), ), xx-large: ( size: unit(18), padding: unit(1.5), thickness: unit(1.25), ), xxx-large: ( size: unit(24), padding: unit(2), thickness: unit(2), ), ); // Animation $loader-animation-length: 2s; $loader-animation-easing: linear; $loader-animation-stroke-initial: 0.1; // treat this as percentage of total stroke filled $loader-animation-stroke-peak: 0.9; $loader-animation-rotate-initial: rotation(0deg); $loader-animation-rotate-middle: rotation(360deg); $loader-animation-rotate-end: rotation(1080deg); // States $loader-state-loading-color: palette(cg9); // when theme is not set $loader-state-success-color: palette(cs1); $loader-state-error-color: palette(cs3);
|style||default / lifted||default|
|size||small / medium / default / large / x-large / xx-large / xxx-large||default|
|state||default / success / error||default|