Доработка для Bootstrap, используем Progressbar во всех элементах

Всего 9 строчек кода CSS дают возможность использовать статус загрузки для любого стандартного элемента в Bootstrap v 3.0 и выше. Используйте их на здоровье в своих проектах

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

Чтобы использовать - добавляйте к элментам класс Loading. К некоторым - также нужно добавлять bg-primary, чтобы придать раскраску

Ниже приведены примеры как установить статус загрузки для каждого из элементов в отдельности

Animation samples

Buttons

Links

Default Primary Danger Success Info Warning

Disabled

Default Primary Danger Success Info Warning

Input buttons

Button buttons

Default Primary

Table

Forms

Helper

Nullam id dolor id nibh ultricies vehicula ut id elit.

Dropdown

Tabs

• Home
• Profile
• Messages

Navbar

Inverse

Pagination

• «
• 1 (current)
• 2 (2)
• 3 (3)

Pager

• Previous
• Next

Alerts

Panels

Well

Пользуйтесь. Если вы нашли тему интересной - не забудьте рассказать друзьям, где вы о ней узнали