<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>How to use</h2>
<p>Just add "loading" class with any component</p>
<h2>Animation samples</h2>
<h3>Buttons</h3>
<h4>Links</h4>
<a class="btn btn-default loading">Default</a>
<a class="btn btn-primary loading">Primary</a>
<a class="btn btn-danger loading">Danger</a>
<a class="btn btn-success loading">Success</a>
<a class="btn btn-info loading">Info</a>
<a class="btn btn-warning loading">Warning</a>
<h4>Disabled</h4>
<a class="btn btn-default loading disabled">Default</a>
<a class="btn btn-primary loading disabled">Primary</a>
<a class="btn btn-danger loading disabled">Danger</a>
<a class="btn btn-success loading disabled">Success</a>
<a class="btn btn-info loading disabled">Info</a>
<a class="btn btn-warning loading disabled">Warning</a>
<h4>Input buttons</h4>
<input type='submit' class="btn btn-default loading" value='Default'>
<input type='submit' class="btn btn-primary loading" value='Primary'>
<h4>Button buttons</h4>
<button class="btn btn-default loading">Default</button>
<button class="btn btn-primary loading">Primary</button>
<h3>Table</h3>
<table class="table">
<tbody>
<tr>
<th class='danger loading'>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr class='info loading'>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<h3>Forms</h3>
<form>
<div class='form-group has-success'>
<label class="control-label" for="input1">Input with success</label>
<input type="text" class="form-control loading" id="input1">
</div>
<div class='form-group'>
<label class="control-label" for="input2">Input</label>
<input type="text" class="form-control loading" id="input2">
</div>
<div class='form-group'>
<label class="control-label" for="input3">Select</label>
<select class="form-control loading"><option value="">Default select</option></select>
</div>
<div class='form-group'>
<label class="control-label" for="input4">Textarea</label>
<textarea class="form-control loading"></textarea>
</div>
<div class='form-group'>
<label class="control-label" for="input5">Input group</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control loading" placeholder="Username">
</div>
</div>
</form>
<h3>Helper</h3>
<p class="bg-primary loading">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h3>Dropdown</h3>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style='display: block;position: relative'>
<li role="presentation"><a class='bg-danger loading' role="menuitem" tabindex="-1" href="#">Danger loding link</a></li>
<li role="presentation"><a class='loading' role="menuitem" tabindex="-1" href="#">Loading</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a class='bg-primary loading' role="menuitem" tabindex="-1" href="#">Primary loading link</a></li>
</ul>
</div>
<div style="clear: both;"></div>
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active loading"><a href="#">Home</a></li>
<li class='loading'><a href="#">Profile</a></li>
<li><a class='bg-primary loading' href="#">Messages</a></li>
</ul>
<h3>Navbar</h3>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active loading"><a href="#">Active loading link</a></li>
<li class='bg-success loading'><a href="#">Success loading link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class='loading'><a href="#">Loading link</a></li>
</ul>
<p class="navbar-text">Text.Next will be buttons</p>
<button type="button" class="btn btn-warning navbar-btn loading">Warning button</button>
</div>
</nav>
<h4>Inverse</h4>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active loading"><a href="#">Active loading link</a></li>
<li class='bg-success loading'><a href="#">Success loading link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class='loading'><a href="#">Loading link</a></li>
</ul>
<p class="navbar-text">Text.Next will be buttons</p>
<button type="button" class="btn btn-warning navbar-btn loading">Warning button</button>
</div>
</nav>
<h3>Pagination</h3>
<ul class="pagination">
<li class="disabled loading"><a href="#">«</a></li>
<li class="active loading"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a class='loading' href="#">2 <span class="sr-only">(2)</span></a></li>
<li><a href="#">3 <span class="sr-only">(3)</span></a></li>
</ul>
<h3>Pager</h3>
<ul class="pager">
<li class='loading'><a href="#">Previous</a></li>
<li class='loading'><a href="#">Next</a></li>
</ul>
<h3>Alerts</h3>
<div class="alert alert-success loading">
<strong>Well done!</strong>
You successfully read this important alert message. <a href="#" class="alert-link">link</a>
</div>
<h3>Panels</h3>
<div class="panel panel-primary">
<div class="panel-heading loading">Panel with loading header</div>
<div class="panel-body">Panel content</div>
<table class="table">
<tbody>
<tr>
<th class='danger loading'>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr class='info loading'>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<ul class="list-group">
<li class="list-group-item loading">Loading List group</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<h3>Well</h3>
<div class="well loading">Loading well</div>
</div>
</div>
/*Author: Kosmom.ru*/.loading,.loading>td,.loading>th,.nav li.loading.active>a,.pagination li.loading,.pagination>li.active.loading>a,.pager>li.loading>a{
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-size: 40px 40px;
animation: 2s linear 0s normal none infinite progress-bar-stripes;
-webkit-animation: progress-bar-stripes 2s linear infinite;
}
.btn.btn-default.loading,input[type="text"].loading,select.loading,textarea.loading,.well.loading,.list-group-item.loading,.pagination>li.active.loading>a,.pager>li.loading>a{
background-image: linear-gradient(45deg, rgba(235, 235, 235, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(235, 235, 235, 0.15) 50%, rgba(235, 235, 235, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
}