UIkit Spinner

UIkit spinner is used to create an animated loading spinner component that specifies that the web page is not completely loaded into the browser.

Steps To Create Spinner Component

To create a spinner component, you have to add uk-spinner attribute to the spinner container i.e <div>.

General Syntax

      <div uk-spinner ></div>

Source Code

     <h2>UIkit:Spinner Component </h2>
<div uk-spinner ></div>

Source Code: Output

The above source code result will be:

To control the size of the spinner, simply you have to provide the ratio value inside the uk-spinner attribute.

General Syntax

      <div uk-spinner="ratio: 3"></div>

Source Code

     <span class="uk-margin-small-right" uk-spinner="ratio: 3"></span>
<span uk-spinner="ratio: 4.5"></span>

Source Code: Output

The above source code result will be:

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4