Skip to content

Instantly share code, notes, and snippets.

@prashantdawar

prashantdawar/index.html

Last active January 19, 2018 06:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save prashantdawar/0b573982746376c98270f38ed816d89b to your computer and use it in GitHub Desktop.
Save prashantdawar/0b573982746376c98270f38ed816d89b to your computer and use it in GitHub Desktop.
Download ZIP
Material Table With Progress Bar
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Material Table</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/tablestyle.css">
</head>
<body>
<div id="top-container">
<div class="t-container">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate p-bar" ></div>
<table class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Nickname</th>
<th>Age</th>
<th class="mdl-data-table__cell--non-numeric">Living?</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">John Lennon</td>
<td class="mdl-data-table__cell--non-numeric">The smart one</td>
<td>40</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
<td class="mdl-data-table__cell--non-numeric">The cute one</td>
<td>73</td>
<td class="mdl-data-table__cell--non-numeric">Yes</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">George Harrison</td>
<td class="mdl-data-table__cell--non-numeric">The shy one</td>
<td>58</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
<td class="mdl-data-table__cell--non-numeric">The funny one</td>
<td>74</td>
<td class="mdl-data-table__cell--non-numeric">Yes</td>
</tr>
</tbody>
</table>
<!-- Colored FAB button -->
<button id="item-add" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons" id="add-item">add</i>
</button>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Raw
material-table-with-floating-button-and-progress-bar.markdown

Material Table With Floating Button and Progress Bar

Material Design Table with Floating Action Button and Progress Bar

A Pen by prashant dawar on CodePen.

License.

Raw
material-table-with-progress-bar.markdown
Raw
script.js
$(document).ready(function(){
/*============================/For Rate Table Container */
var tableWidth = $('.t-container > table').width();
var pBar = $('.t-container > .p-bar');
pBar.width(tableWidth + 2);
/* For Rate Table Container/===========================*/
//=============== [ code to be edited ]
var btnItemAdd = $('.t-container > #item-add');
// Selects first child in header row.
// Abbr: bml - button margin from left
var bml = $('.t-container > table > thead > tr > th:nth-child(1)').width();
// [ end of code to be edited ] ===============/
btnItemAdd.css('left',bml + 16);
btnItemAdd.delay( 800 ).fadeIn( 400 );
});
Raw
style.css
#top-container{
text-align: center;
}
.t-container{
position: relative;
display: inline-block;
}
.t-container > #item-add{
top: 32px;
position: absolute;
z-index: 1;
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment