mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
121 lines
3.1 KiB
HTML
121 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="ionic">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Spinners</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
|
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bar bar-header bar-royal">
|
|
<h1 class="title">Spinners</h1>
|
|
</header>
|
|
|
|
<ion-content class="has-header padding">
|
|
|
|
<table class="table spinner-table" ng-app="ionic">
|
|
<tbody><tr>
|
|
<th>
|
|
<code>android</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="android"></ion-spinner>
|
|
<ion-spinner icon="android" class="spinner-assertive"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>ios</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="ios"></ion-spinner>
|
|
<ion-spinner icon="ios" class="spinner-positive"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>ios-small</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="ios-small"></ion-spinner>
|
|
<ion-spinner icon="ios-small" class="spinner-calm"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>bubbles</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="bubbles"></ion-spinner>
|
|
<ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>circles</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="circles"></ion-spinner>
|
|
<ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>crescent</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="crescent"></ion-spinner>
|
|
<ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>dots</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="dots"></ion-spinner>
|
|
<ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>lines</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="lines"></ion-spinner>
|
|
</td>
|
|
<td style="background:black">
|
|
<ion-spinner icon="lines" class="spinner-light"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>ripple</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="ripple"></ion-spinner>
|
|
</td>
|
|
<td style="background: black">
|
|
<ion-spinner icon="ripple" class="spinner-stable"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<code>spiral</code>
|
|
</th>
|
|
<td>
|
|
<ion-spinner icon="spiral"></ion-spinner>
|
|
</td>
|
|
<td style="background: black">
|
|
<ion-spinner icon="spiral" class="spinner-light"></ion-spinner>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
|
|
</ion-content>
|
|
|
|
</body>
|
|
</html>
|