Як зробити прогрес бар на чистому css3.
Відео: Як зробити прелоадер? ► CSS / JS
Всім привіт! У цій статті я покажу, як створити прогрес бар на чистому CSS3.
Почнемо, як ви вже здогадалися, з розмітки
Відео: How to Create Progress Bar | HTML Tutorials | CSS Tutorials | jаvascript Tutorials
lang="En"gt;
charset="Utf-8"gt;
Progress Bar
rel="Stylesheet"href="Style.css"gt;
class="Wrapper"gt;
class="Progress-bar"gt;
class="Progress-bar-fill"style="width:30%"gt;
Тепер перейдемо до CSS. Стилі будуть досить простими
.wrapper {
width:500px-
}
.progress-bar {
width:100% -
background-color:# e0e0e0-
padding:3px-
border-radius:3px-
box-shadow: inset 01px3px rgba(0,0,0,.2) -
}
.progress-bar-fill {
display: block-
height:22px-
background-color:# 659cef-
border-radius:3px-
transition: width 500ms ease-in-out-
}
От і все! Ось так, здавалося б, просто ми можемо зробити досить цікавий прогрес бар на чистому CSS3. Тепер ви можете використовувати його в своїх скриптах.
А у мене на цьому все! Дякую за увагу!
Демонстрація: https://jsfiddle.net/806t3zrh/3/
Поділися в соціальних мережах:
Схожі
- Як зробити анімацію завантаження на чистому css3.
- Як зробити прелоадер на чистому css3.
- Як створити "вислизати" меню на css.
- Як зробити слайдер на чистому css3 без використання jаvascript.
- Як зробити аккордіон на чистому css3.
- Як подивитися прогрес dd linux
- Як зробити вигнуту тінь на чистому css3.
- Як додати ефект переходу акордеону на чистому css3.
- Як створити progressbar за допомогою плагіна для jquery.
- Як зробити самостійно перегортаються текст на css3.
- Як зробити блоки зі слайдер ефектом на чистому css3.
- Як зробити онлайн-трансляцію вашої веб-камери на чистому jаvascript.
- Як зробити ефект вдавленого тексту на css3.
- Як зробити трикутники на чистому css.
- Як зробити просту навігацію на html5 і css3.
- Як зробити індикатор прокрутки на css3.
- Css3 трансформації.
- Плавні переходи в css3.
- 3D менюшка на чистому css3.
- Чуйний "липкий" підвал сайту.
- Верстаємо круглі кнопки на css3.