Skip to content

Instantly share code, notes, and snippets.

@djalmaaraujo

djalmaaraujo/index.html

Last active December 10, 2015 12:49
Show Gist options
  • Save djalmaaraujo/4436814 to your computer and use it in GitHub Desktop.
Save djalmaaraujo/4436814 to your computer and use it in GitHub Desktop.
Download ZIP
Alloy ProgressBar DEMO
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../build/alloy-twitter-bootstrap/bootstrap-2.2.2.min.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
body {
font-size: 12px;
}
#wrapper {
padding: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Alloy - ProgressBar Demo</h1>
<h3>Basic</h3>
<button id="setValue">Set to 85%</button>
<button id="setOrientation">Vertical orientation</button>
<br /><br />
<div id="basic" class="aui-progress"></div>
<h3>Striped</h3>
<div id="striped" class="aui-progress aui-progress-striped"></div>
<h3>Animated</h3>
<div id="animated" class="aui-progress aui-progress-striped aui-active"></div>
<h3>Stacked</h3>
<div id="stacked" class="aui-progress aui-progress-success"></div>
<h3>From Markup</h3>
<div id="markup" class="aui-progress">
<div class="aui-progress-bar-text">
From markup
</div>
</div>
<h3>Vertical</h3>
<div class="vertical aui-progress aui-vertical"></div>
</div>
<script type="text/javascript" charset="utf-8">
AUI().use('aui-aria', 'aui-progressbar', function(A) {
/**
* Basic
*/
var basic = new A.ProgressBar({
boundingBox: '#basic',
label: 'Progressbar at 40%',
max: 100,
min: 0,
on: {
complete: function(e) {
this.set('label', 'Complete!');
},
valueChange: function(e) {
this.set('label', 'Progressbar at ' + e.newVal + '%');
}
},
value: 40,
width: 500
}).render();
A.one('#setValue').on('click', function() {
basic.set('value', 85);
});
A.one('#setOrientation').on('click', function() {
basic.setAttrs({
height: 100,
orientation: 'vertical'
});
});
/**
* Striped
*/
var striped = new A.ProgressBar({
boundingBox: '#striped',
cssClass: 'aui-progress-info',
height: 40,
label: '75%',
value: 75
})
.render();
/**
* Animated
*/
var animated = new A.ProgressBar({
boundingBox: '#animated',
value: 55
})
.render();
/**
* Stacked
*/
var stacked = new A.ProgressBar({
boundingBox: '#stacked',
label: '63%',
value: 63
})
.render();
/**
* From Markup
*/
var from_markup = new A.ProgressBar({
boundingBox: '#markup',
value: 40
})
.render();
/**
* Basic Vertical Example
*/
var vertical = new A.ProgressBar({
boundingBox: '.vertical',
cssClass: 'aui-progress-danger',
height: 300,
label: '55%',
orientation: 'vertical',
value: 55,
width: 200
})
.render();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment