JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<body>
<div class="container">
<div class="page-header">
<h3>Apply CSS on element load</h3>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-2">
<div id="theTableContainer"></div>
</div>
</div>
</div>
</body>
CSS
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.active {
background-color: #8600e6;
color: #F8F8FF;
font-weight: bold;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
JavaScript
(function(){
'strict function'
$(document).ready(mainFn);
function mainFn(){
console.log("Main Function is Loaded");
var obj = {
employeeList : [
{
"name" : "Richard Joss",
"profession" : "Photographer",
"salary" : "1,500"
},
{
"name" : "Ronaldo Parker",
"profession" : "Football Trainer, Coach",
"salary" : "4,500"
},
{
"name" : "Vivan Kushner",
"profession" : "Lawyer",
"salary" : "7,500"
},{
"name" : "Winston Bardem",
"profession" : "Software Developer",
"salary" : "5,600"
},{
"name" : "Julian Combs",
"profession" : "Music Composer",
"salary" : "6,700"
},{
"name" : "Estafan Walambo",
"profession" : "Machine Assembler",
"salary" : "2,500"
}
]
}
var templateHtml = "" +
"<table class='table table-bordered'>" +
"<thead>"+
"<th>Name</th>"+
"<th>Profession</th>"+
"<th>Salary</th>"+
"</thead>"+
"<tbody>"+
"<% _.each(employeeList,function(employee,index) { %>" +
"<tr>"+
"<td><%= employee.name %></td>"+
"<td><%= employee.profession %></td>"+
"<td><%= employee.salary %> USD per Month</td>"+
"</tr>"+
"<% }); %>" +
"</tbody>"+
"</table>";
var compile = _.template(templateHtml);
var compiledTemplate = compile(obj);
var imageLoaderTemplate = "<div class='loader'></div>"
$("#theTableContainer").html(imageLoaderTemplate);
setTimeout(function(){
$("#theTableContainer").html(compiledTemplate);
$("#theTableContainer table tr:gt(0)").each(function(){
$(this).find("td:eq(2)").addClass('active');
});
},5000); // after 5 seconds
} // end of "mainFn"
})();