<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)); }