dashing-framework
Version:
Style framework for Dash
84 lines (77 loc) • 3.06 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/example.css" rel="stylesheet">
<title>Spinner</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../../scripts/scripts.js"></script>
<script src="../../scripts/prism.js"></script>
</head>
<body class="example-body">
<div class="main-content">
<div id="sidebarNavigation" class="example-sidebar"></div>
<div class="sidebar--overlay is-hidden"></div>
<div class="main">
<div class="page-header">
<button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button>
<h1>Spinner</h1>
<a href="http://design.samaritanministries.org/product/components/spinner/" target="_blank" class="button button--small button--smooth float-right">
View Guidelines
</a>
</div>
<div class="app-content">
<div class="row">
<div class="column column--full">
<h2 class="example-header no-margin--top">Default Spinner <button class="button button--transparent button--copy-link" data-id="copyurl" id="Default_Spinner"></h2>
<div class="row example-container">
<div class="column column--full">
<div class="relative" style="height: 8rem;">
<div class="dash-spinner"></div>
</div>
</div>
</div>
<div class="code-toggle"><i class="icon--code"></i></div>
<pre><code class="language-html"><div class="dash-spinner"></div></code>
</pre>
<pre><code class="language-scss">//Include this variable in your theme file to change the color of your spinner
$spinner-color: #000;</div></code>
</pre>
</div>
</div>
<div class="row">
<div class="column column--full">
<h2 class="example-header no-margin--top">Small Spinner <button class="button button--transparent button--copy-link" data-id="copyurl" id="Small_Spinner"></h2>
<div class="row example-container">
<div class="column column--full">
<div class="relative" style="height: 5rem;">
<div class="dash-spinner small"></div>
</div>
</div>
</div>
<div class="code-toggle"><i class="icon--code"></i></div>
<pre><code class="language-html"><div class="dash-spinner small"></div></code>
</pre>
</div>
</div>
<div class="row">
<div class="column column--full">
<h2 class="example-header">Button Spinner <button class="button button--transparent button--copy-link" data-id="copyurl" id="Button_Spinner"></h2>
<div class="row example-container">
<div class="column column--full">
<button id="hasSpinner" class="button button--blue">
Click me
</button>
</div>
</div>
<div class="code-toggle"><i class="icon--code"></i></div>
<pre><code class="language-html"><button class="button button--blue has-spinner">
Click Me
</button></code>
</pre>
</div>
</div>
</div>
</body>
</html>