Доработка для 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

Table

1 2 3
1 2 3

Forms

@

Helper

Nullam id dolor id nibh ultricies vehicula ut id elit.

Dropdown

 

Tabs

Navbar

Inverse

Pagination

Pager

Alerts

Well done! You successfully read this important alert message. link

Panels

Panel with loading header
Panel content
1 2 3
1 2 3
  • Loading List group
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Well

Loading well

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

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 1010
  • Комментариев: 0
  • Создан: 28.02.2014 12:56

Комментарии (0)