Прогресс бар mibar v1 для uCoz
Здравствуйте, сегодня создали Прогресс бар с анимации для вас!) Ее легко можно ставить в любой дизайн и любом тематике, также можно ставить в каталог сайтов изменив проценты к примеру 80% ставим оператор OTHER и будет выводить индикатор с только с только вы указывал в поле OTHER. также можете изменить цвет прогресса, к примеру в вид материале найдите:
и заменить rgba на нужную цвет!
Установка:
Где хотите видеть ставьте данный код:
Добавляем таблицу стилей (CSS):
Или рядом с прогресс баром ставьте стили так:
Вот и всё)
Код
style="width:80%; box-shadow:-1px 10px 10px rgba(91, 192, 222, 0.7);"
и заменить rgba на нужную цвет!
Установка:
Где хотите видеть ставьте данный код:
Код
<div class="col-md-6">
<div class="progress-outer">
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width:80%; box-shadow:-1px 10px 10px rgba(91, 192, 222, 0.7);"></div>
<div class="progress-value">80%</div>
</div>
</div>
<div class="progress-outer">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width:60%; box-shadow:-1px 10px 10px rgba(116, 195, 116,0.7);"></div>
<div class="progress-value">60%</div>
</div>
</div>
<div class="progress-outer">
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width:40%; box-shadow:-1px 10px 10px rgba(240, 173, 78,0.7);"></div>
<div class="progress-value">40%</div>
</div>
</div>
</div>
<div class="progress-outer">
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width:80%; box-shadow:-1px 10px 10px rgba(91, 192, 222, 0.7);"></div>
<div class="progress-value">80%</div>
</div>
</div>
<div class="progress-outer">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width:60%; box-shadow:-1px 10px 10px rgba(116, 195, 116,0.7);"></div>
<div class="progress-value">60%</div>
</div>
</div>
<div class="progress-outer">
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width:40%; box-shadow:-1px 10px 10px rgba(240, 173, 78,0.7);"></div>
<div class="progress-value">40%</div>
</div>
</div>
</div>
Добавляем таблицу стилей (CSS):
Код
progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}
.alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}
.progress{display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}
.progress-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;background-color:#007bff;transition:width .6s ease}
.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}
.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}
.progress-outer{
background: #fff;
border-radius: 50px;
padding: 25px;
margin: 10px 0;
box-shadow: 0 0 10px rgba(209, 219, 231,0.7);
}
.progress{
height: 27px;
margin: 0;
overflow: visible;
border-radius: 50px;
background: #eaedf3;
box-shadow: inset 0 10px 10px rgba(244, 245, 250,0.9);
}
.progress .progress-bar{
border-radius: 50px;
}
.progress .progress-value{
position: relative;
left: -45px;
top: 4px;
font-size: 14px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
}
.progress-bar.active{
animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive {
0% { width: 0%; }
}
.alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}
.progress{display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}
.progress-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;background-color:#007bff;transition:width .6s ease}
.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}
.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}
.progress-outer{
background: #fff;
border-radius: 50px;
padding: 25px;
margin: 10px 0;
box-shadow: 0 0 10px rgba(209, 219, 231,0.7);
}
.progress{
height: 27px;
margin: 0;
overflow: visible;
border-radius: 50px;
background: #eaedf3;
box-shadow: inset 0 10px 10px rgba(244, 245, 250,0.9);
}
.progress .progress-bar{
border-radius: 50px;
}
.progress .progress-value{
position: relative;
left: -45px;
top: 4px;
font-size: 14px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
}
.progress-bar.active{
animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive {
0% { width: 0%; }
}
Или рядом с прогресс баром ставьте стили так:
Код
<style>
progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}
.alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}
.progress{display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}
.progress-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;background-color:#007bff;transition:width .6s ease}
.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}
.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}
.progress-outer{
background: #fff;
border-radius: 50px;
padding: 25px;
margin: 10px 0;
box-shadow: 0 0 10px rgba(209, 219, 231,0.7);
}
.progress{
height: 27px;
margin: 0;
overflow: visible;
border-radius: 50px;
background: #eaedf3;
box-shadow: inset 0 10px 10px rgba(244, 245, 250,0.9);
}
.progress .progress-bar{
border-radius: 50px;
}
.progress .progress-value{
position: relative;
left: -45px;
top: 4px;
font-size: 14px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
}
.progress-bar.active{
animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive {
0% { width: 0%; }
}
</style>
progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}
.alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}
.progress{display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}
.progress-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;text-align:center;background-color:#007bff;transition:width .6s ease}
.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}
.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}
.progress-outer{
background: #fff;
border-radius: 50px;
padding: 25px;
margin: 10px 0;
box-shadow: 0 0 10px rgba(209, 219, 231,0.7);
}
.progress{
height: 27px;
margin: 0;
overflow: visible;
border-radius: 50px;
background: #eaedf3;
box-shadow: inset 0 10px 10px rgba(244, 245, 250,0.9);
}
.progress .progress-bar{
border-radius: 50px;
}
.progress .progress-value{
position: relative;
left: -45px;
top: 4px;
font-size: 14px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
}
.progress-bar.active{
animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive {
0% { width: 0%; }
}
</style>
Вот и всё)
Скачать бесплатно - [.]
без регистрации через 5 сек.
Или скачать без ожидания.
Или скачать без ожидания.
