Edit page
Home
Getting Started
Components
AlertAnimateHeightAvatarAvatarListBadgeButtonButtonMenuCalendarCalendarRangeCardCarouselChipClickOutsideContainerContentLoaderPropsExamplesCurrencyDataTableDatePickerDateTimePickerDividerDrawerDropdownFloatingActionsGoogleMapGridIconIconDotIfInfiniteScrollKW LogoLoaderModalMonthPickerMonthRangeNavIconOptionsTogglePaginationPartnerLogoResponsiveSVG IconSnackbarStaticMapStatusIndicatorTabTableTimePickerToastsTooltip
Forms
Typography
Utilities
Visualization Components

ContentLoader

Content loaders are used to simulate the content that will appear once loading is complete. They are built using pure SVG elements to compose the layout.

Props

animate
Bool
true
children
Node
className
String
height
Number
130
primaryColor
String
"#f0f0f0"
secondaryColor
String
"#e0e0e0"
speed
Number
2
width
Number
400

Examples

Basic ContentLoader

You can use this online drag-n-drop tool to quickly build a loader.

Server Side Rendering

Wrap your application with ContentLoaderProvider. This should prevent hydration mismatch warnings.

import React from 'react';
import { renderToString } from 'react-dom/server';
import { ContentLoaderProvider } from 'real-react';
import App from './app';
const Root = () => {
  return (
    <ContentLoaderProvider>
      <App />
    </ContentLoaderProvider>
  );
};