Loading Indicators

Animated Red Bar and Circle Loading Full Page Indicators

Adding the classname of dk-loading or dk-loading-circle to the body of a page will display a 3 pixel tall red animated gradient or 150 pixel circle gradient animation onto the page. This will also add css opacity:0.5 to the page for all divs except the header, flymenu and footer.

Animated Red Bar

Loading bar animation that can be placed with another element. Animation slows and speeds up at different spots to mimic loading content. Optional classnames can be added to change the animation effect. looping will add an infinite loop to the animation. smooth-progress will remove the starting and stopping effect to be one smooth animation from left to right.

<div class="dk-loading-redbar looping">
    <span><span class="dk-loading-redbar__progress"></span></span>
</div>
<br /><br />
<div class="dk-loading-redbar smooth-progress looping">
    <span><span class="dk-loading-redbar__progress"></span></span>
</div>

Skeleton Animated Cards

The classname of dk-skeleton will add a left to right animated background color to whatever element it is added to. Example below is added to a dk-card div. Remove the classname when the content is loaded to stop the animation. This classname had a min-height of 40px attached, other layout styles will need to be added per project.

<div className="dk-skeleton dk-card"></div>

Circular Spinner

A div with the classname of dk-loading-circle will add

Icon Spinner

A div with the classname of dk-loading-icon will add an inline circular loading animation using an icon. This element will need to be shown/hidden per use.

<div className="dk-loading-icon"></div>