marble
Version:
WeDeploy's style guide and UI components
232 lines (196 loc) • 5.61 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Spinner</title>
<link rel="stylesheet" href="../build/marble.css">
<link rel="stylesheet" href="../build/fonts/galano/galano.css">
<link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css">
<link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:700,400,300|Open+Sans:700,400,300">
<style>
body {
padding: 20px;
text-align: center;
}
#alert1 {
bottom: 50px;
}
#alert2 {
bottom: 150px;
}
.boxes {
margin-bottom: 20px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.box {
border: 0;
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
color: rgba($primary, .8);
font-size: 14px;
font-weight: 400;
margin: 0 0 0 20px;
min-height: 20px;
padding: 20px;
text-align: center;
min-width: 200px;
vertical-align: middle;
display: table;
}
.btn, .label {
margin-left: 20px;
}
.box h2 {
margin: 0 0 20px ;
padding: 0;
}
.box .spinner {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Spinners</h1>
<div class="boxes">
<div class="box">
<h2>spinner large</h3>
<span class="spinner spinner-large"></span>
<p>Loading...</p>
</div>
<div class="box">
<h2>spinner medium</h3>
<span class="spinner spinner-medium"></span>
<p>Loading...</p>
</div>
<div class="box">
<h2>spinner small</h3>
<span class="spinner spinner-small"></span>
<p>Loading...</p>
</div>
<!-- danger -->
<div class="box">
<h2>spinner large danger</h3>
<span class="spinner spinner-large spinner-danger"></span>
<p>Loading...</p>
</div>
<div class="box">
<h2>spinner medium danger</h3>
<span class="spinner spinner-medium spinner-danger"></span>
<p>Loading...</p>
</div>
<div class="box">
<h2>spinner small danger</h3>
<span class="spinner spinner-small spinner-danger"></span>
<p>Loading...</p>
</div>
<!-- warning -->
<div class="box">
<h2>spinner large warning</h3>
<span class="spinner spinner-large spinner-warning"></span>
<p>Loading...</p>
</div>
<div class="box">
<h2>spinner medium warning</h3>
<span class="spinner spinner-medium spinner-warning"></span>
<p>Loading...</p>
</div>
<div class="box">
<h2>spinner small warning</h3>
<span class="spinner spinner-small spinner-warning"></span>
<p>Loading...</p>
</div>
</div>
<!-- spinner done -->
<div class="boxes">
<div class="box">
<h2>spinner done</h3>
<span class="spinner spinner-large spinner-done"></span>
<p>Loaded</p>
</div>
<div class="box">
<h2>spinner done</h3>
<span class="spinner spinner-medium spinner-done"></span>
<p>Loaded</p>
</div>
<div class="box">
<h2>spinner done</h3>
<span class="spinner spinner-small spinner-done"></span>
<p>Loaded</p>
</div>
<!-- danger -->
<div class="box">
<h2>spinner done danger</h3>
<span class="spinner spinner-large spinner-danger spinner-done"></span>
<p>Loaded</p>
</div>
<div class="box">
<h2>spinner done danger</h3>
<span class="spinner spinner-medium spinner-danger spinner-done"></span>
<p>Loaded</p>
</div>
<div class="box">
<h2>spinner done danger</h3>
<span class="spinner spinner-small spinner-danger spinner-done"></span>
<p>Loaded</p>
</div>
<!-- warning -->
<div class="box">
<h2>spinner done warning</h3>
<span class="spinner spinner-large spinner-warning spinner-done"></span>
<p>Loaded</p>
</div>
<div class="box">
<h2>spinner done warning</h3>
<span class="spinner spinner-medium spinner-warning spinner-done"></span>
<p>Loaded</p>
</div>
<div class="box">
<h2>spinner done warning</h3>
<span class="spinner spinner-small spinner-warning spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<div class="boxes">
<a class="btn btn-success" href="#"><span class="spinner spinner-small spinner-white"></span></a>
<a class="btn btn-danger" href="#"><span class="spinner spinner-small spinner-white"></span></a>
</div>
<div class="boxes">
<span class="label label-success"><span class="spinner spinner-small spinner-left"></span>success</span>
<span class="label label-danger"><span class="spinner spinner-danger spinner-small spinner-left"></span>danger</span>
<span class="label label-warning"><span class="spinner spinner-warning spinner-small spinner-left"></span>warning</span>
</div>
<div id="alert1" class="alert animated slideInBottom">
<span class="spinner"></span>
<span class="alert-body">
User was deleted successfully.
</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle"><span aria-hidden="true">×</span></button>
</div>
<div id="alert2" class="alert animated slideInBottom">
<span class="spinner spinner-done"></span>
<span class="alert-body">
User was deleted successfully.
</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle"><span aria-hidden="true">×</span></button>
</div>
</body>
</html>