Search results

Styles in React Skeleton component

02 Feb 2023 / 1 minute to read

You can customize skeleton control in the below ways.

cssClass

You can customize the style of a Skeleton control by using cssClass. The appearance of React Skeleton can be customized by changing the wave color, background color, width, and height. For detailed information, refer index.css file below.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';
function App() {
    return (<SkeletonComponent shape='Circle' width="60px" cssClass='e-customize'></SkeletonComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 React Skeleton Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

.e-customize.e-skeleton.e-shimmer-wave::after{
  background-image: linear-gradient(90deg, transparent calc(50% - 100px), 
  rgb(30 128 234 / 50%) 50%, 
  transparent calc(50% + 100px));
}

.e-customize.e-skeleton.e-skeleton-circle{
  background-color: #a8c1f2;
}
Copied to clipboard
import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';

function App() {

  return (
    <SkeletonComponent shape= 'Circle' width= "60px" cssClass='e-customize'></SkeletonComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Visible

You can use the visible property which defines the visible state of Skeleton.

Copied to clipboard
import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

function App() {

  return (
    <SkeletonComponent shape= 'Circle' width= "60px" visible={false}></SkeletonComponent>);
}
export default App;
Contents
Contents