d95bdda9ec
All checks were successful
Build, Test, and Publish (to Private NPM Registry) UI Components Library / publish (push) Successful in 1m2s
36 lines
No EOL
1.5 KiB
Text
36 lines
No EOL
1.5 KiB
Text
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Spinner Test</title>
|
|
<link rel="stylesheet" type="text/css" href="<%= componentsStyleHref %>">
|
|
<script src="<%= componentsScriptSrc %>"></script>
|
|
</head>
|
|
<body>
|
|
<main style="padding: 20px;">
|
|
<h1>Spinner Test</h1>
|
|
<p>The following is an example of a spinner component. It indicates a loading or processing state.</p>
|
|
<section>
|
|
<h2>Default Spinner</h2>
|
|
<%- useComponent('spinner', { id: 'example-spinner', content: 'Loading...' }) %>
|
|
</section>
|
|
<section>
|
|
<h2>Inline Spinner</h2>
|
|
<%- useComponent('spinner', { id: 'inline-spinner', content: 'Loading...', inline: true }) %>
|
|
</section>
|
|
<section>
|
|
<h2>Slow Spinner</h2>
|
|
<%- useComponent('spinner', { id: 'slow-spinner', content: 'Loading...', speed: 'slow' }) %>
|
|
</section>
|
|
<section>
|
|
<h2>Fast Spinner</h2>
|
|
<%- useComponent('spinner', { id: 'fast-spinner', content: 'Loading...', speed: 'fast' }) %>
|
|
</section>
|
|
<section>
|
|
<h2>Slow Inline Spinner</h2>
|
|
<%- useComponent('spinner', { id: 'slow-inline-spinner', content: 'Loading...', inline: true, speed: 'slow' }) %>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html> |