Доработка для 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
  • Просмотров: 1112
  • Комментариев: 0
  • Создан: 28.02.2014 12:56

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

Ваши предложения и пожелания пишите на pro@kosmom.ru

Теги

backup bootstrap core framework eloquent excel home project html ios javascript keep-alive kpi laravel legacy mvp orm php rip scroll timestamp undefined vue vuetify watch безопасность биометрический паспорт ваша любаша для путешествий загран на 10 лет загран паспорт загранпаспорт нового образца зимние книги как заполнить анкеты кеширование книги на новый год логирование мцф недвижимость новогодние книги образец заполнения антеты паспорт для путешествий паспорт нового поколения печать продукт проектирование прокси разработка ремонт ремонт в апартаментах ремонт нежилого помещения самокат сдача сколько стоил ремонт апартаментов спорт стандарты таблица финансы хостинг цена ремонта что почитать зимой юзабилити

Случайный пост

02.02.2017 11:14
21 способ сэкономить деньги