Skip to content

Instantly share code, notes, and snippets.

@darshit-shah

darshit-shah/index.html

Last active October 23, 2015 13:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save darshit-shah/6c2591cb9cfc3645a1ab to your computer and use it in GitHub Desktop.
Save darshit-shah/6c2591cb9cfc3645a1ab to your computer and use it in GitHub Desktop.
Download ZIP
A web component example - progress-bar
Raw
index.html
<!DOCTYPE html>
<head>
<script src="progress-bar.js"></script>
</Head>
<body>
<progress-bar value="25"></progress-bar>
<progress-bar value="50"></progress-bar>
<progress-bar value="75"></progress-bar>
</body>
</html>
Raw
progress-bar.js
var ProgressBar = Object.create(HTMLElement.prototype);
ProgressBar.createdCallback = function() {
var outerBar = document.createElement('div');
outerBar.style.width="100px";
outerBar.style.height="20px";
outerBar.style.background="#F9F9F9";
outerBar.style.border="1px solid steelblue";
outerBar.style.padding="1px";
outerBar.style.margin="10px";
var innerBar = document.createElement('div');
innerBar.style.background="steelblue";
innerBar.style.height="100%";
innerBar.style.width=(+this.getAttribute('value') || 0)+'%';
outerBar.appendChild(innerBar);
this.appendChild(outerBar);
};
ProgressBar.attributeChangedCallback = function(attrName, oldVal, newVal) {
console.log(attrName, oldVal, newVal)
if(attrName === 'value'){
var bar = this.querySelector('div div');
bar.style.width = (+newVal) + '%';
}
}
document.registerElement('progress-bar',{
prototype:ProgressBar
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment