Як зробити прогрес бар на чистому 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/

Поділися в соціальних мережах:

Схожі