Nation Library - Progress bar example

Shows how to create a basic progress bar

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/ProgressBar.js"></script>
<h2 class="title">Handle Outside</h2>
<div class="js-progressbar outside">
  <div class="js-progress"></div>
  <div class="js-hitarea"></div>
  <div class="js-handle"></div>
</div>
<h2 class="title">Handle Inside</h2>
<div class="js-progressbar inside">
  <div class="js-progress"></div>
  <div class="js-hitarea"></div>
  <div class="js-handle"></div>
</div>

CSS

.title {
  margin: 20px 0 0 10%;
  padding: 0;
  font-size: 1.313em;
  font-family: sans-serif;
}

.js-progressbar {
  position: relative;
  width: 75%;
  height: 20px;
  margin: 20px 0 40px 10%;
  background: #0D398B;
}

.js-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 20px;
  background: #0C54D9;
}

.js-hitarea {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 20px;
}

.js-handle {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7ff6d1;
  cursor: pointer;
}
/* Handle is positioned around it's center  so it can poke outside the bar */
.outside .js-handle {
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

JavaScript

// Element to be used as a progress bar with the handle "outside"
var element = document.documentElement.querySelector(".js-progressbar.outside");
// Create the progress bar
var progressBarOutside = new NATION.ProgressBar(element, "outside");

// Listen for clicks on the progress bar
progressBarOutside.addListener(progressBarOutside.CLICKED, function(e) {
	// When clicked, set the current progress to match the location of the click
	progressBarOutside.setProgress(progressBarOutside.getRequestedPercentage());
});

// Set the bar to 70% to start with
progressBarOutside.setProgress(0.7);

// Element to be used as a progress bar with the handle "inside"
element = document.documentElement.querySelector(".js-progressbar.inside");
// Create the progress bar
var progressBarInside = new NATION.ProgressBar(element, "inside");