Skip to content

Commit

Permalink
Add example of spinner Icon. (#11424) (#11425)
Browse files Browse the repository at this point in the history
  • Loading branch information
cjcenizal authored Apr 25, 2017
1 parent d5dda02 commit 2469ce7
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 0 deletions.
19 changes: 19 additions & 0 deletions ui_framework/doc_site/src/views/icon/icon_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ const successHtml = require('./icon_success.html');
const warningHtml = require('./icon_warning.html');
const errorHtml = require('./icon_error.html');
const inactiveHtml = require('./icon_inactive.html');
const spinnerHtml = require('./icon_spinner.html');
const spinnerJs = require('raw!./icon_spinner.js');

export default props => (
<GuidePage title={props.route.name}>
Expand Down Expand Up @@ -134,5 +136,22 @@ export default props => (
html={inactiveHtml}
/>
</GuideSection>

<GuideSection
title="Spinner"
source={[{
type: GuideSectionTypes.HTML,
code: spinnerHtml,
}]}
>
<GuideText>
You can use Icons to represent a loading and successfully-loaded state.
</GuideText>

<GuideDemo
html={spinnerHtml}
js={spinnerJs}
/>
</GuideSection>
</GuidePage>
);
23 changes: 23 additions & 0 deletions ui_framework/doc_site/src/views/icon/icon_spinner.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<div class="kuiFieldGroup" id="loadingDemo">
<div class="kuiFieldGroupSection">
<span class="kuiIcon kuiIcon--basic fa-spinner fa-spin"></span>
</div>

<div class="kuiFieldGroupSection">
<p class="kuiText">
Loading...
</p>
</div>
</div>

<div class="kuiFieldGroup" id="loadedDemo">
<div class="kuiFieldGroupSection">
<span id="spinnerDemo" class="kuiIcon kuiIcon--success fa-check"></span>
</div>

<div class="kuiFieldGroupSection">
<p class="kuiText">
Loaded!
</p>
</div>
</div>
19 changes: 19 additions & 0 deletions ui_framework/doc_site/src/views/icon/icon_spinner.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* eslint-disable */

const $loading = $('#loadingDemo');
const $loaded = $('#loadedDemo');
let isLoading = true;

$loaded.hide();

setInterval(() => {
if (isLoading) {
isLoading = false;
$loading.hide();
$loaded.show();
} else {
isLoading = true;
$loading.show();
$loaded.hide();
}
}, 2000);

0 comments on commit 2469ce7

Please sign in to comment.