"Animation loading state"
Bootstrap 3.1.0 Snippet by kosmom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
/*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));
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: