HTMLPLUS

Spinner

It's an indicator of progress and activity in order to show the loading state of a component or page when the user needs to wait on.

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusSpinner

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
size
Type
"lg" | "md" | "sm""lg" | "md" | "sm"
Default
'md'
Specifies the size of the spinner.
Name
type
Type
"default" | "double-bounce" | "dual-ring" | "ring" | "ripple" | "square""default" | "double-bounce" | "dual-ring" | "ring" | "ripple" | "square"
Default
'default'
Specifies which variant of the spinner to use.
Name
--plus-spinner-color
Specifies the color of the spinner.
Name
--plus-spinner-size
Specifies the size of the spinner.
Name
--plus-spinner-weight
Specifies the weight of the spinner.

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Spinner } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Spinner></Spinner>      
    </div>    
  </>;
};

export default App;
.center {
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Spinner } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid alignItems="center" justifyContent="evenly">      
      <Grid.Item>        
        <Spinner size="sm"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner size="md"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner size="lg"></Spinner>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Spinner } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid alignItems="center" justifyContent="evenly">      
      <Grid.Item>        
        <Spinner size="sm"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner size="md"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner size="lg"></Spinner>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-spinner[size=sm] {
  --plus-spinner-size: 24px;
}
plus-spinner[size=md] {
  --plus-spinner-size: 48px;
}
plus-spinner[size=lg] {
  --plus-spinner-size: 72px;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Spinner } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="evenly">      
      <Grid.Item>        
        <Spinner className="spinner-1"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner className="spinner-2"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner className="spinner-3"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner className="spinner-4"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner className="spinner-5"></Spinner>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
.spinner-1 { --plus-spinner-color: #08dfc8 }
.spinner-2 { --plus-spinner-color: #ff5449 }
.spinner-3 { --plus-spinner-color: #5f9ee9 }
.spinner-4 { --plus-spinner-color: #ffc903 }
.spinner-5 { --plus-spinner-color: #9073c1 }

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Spinner } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="evenly">      
      <Grid.Item>        
        <Spinner type="default"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner type="double-bounce"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner type="ring"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner type="ripple"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner type="dual-ring"></Spinner>        
      </Grid.Item>      
      <Grid.Item>        
        <Spinner type="square"></Spinner>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Spinner } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Spinner type="dual-ring"></Spinner>      
    </div>    
  </>;
};

export default App;
.center {
  text-align: center;
}
plus-spinner {
  --plus-spinner-size: 5rem;
  --plus-spinner-weight: 0.5;
  --plus-spinner-color: purple;
}
Contributors
Prev
Scroll Indicator
Next
Sticky
SELECT YOUR FRAMEWORK
React logo
React