nanobar.js - очень легкий прогрес-бар
Всем привет!
Сам не знаю нафига :lol: , написал(а точнее отредактировал) такую штуку
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nanobar.js</title>
</head>
<script>
var Nanobar = (function () {
'use strict';
var Bar, Nanobar, move, place, init,
move = function () {
var self = this,
dist = this.width - this.here;
if (dist < 0.1 && dist > -0.1) {
place.call( this, this.here );
this.moving = false;
if (this.width == 100) {
this.el.style.height = 0;
setTimeout( function () {
self.cont.el.removeChild( self.el );
}, 300);
}
} else {
place.call( this, this.width - (dist/10) );
setTimeout( function () {
self.go();
}, 20);
}
};
place = function (num) {
this.width = num;
this.el.style.width = this.width + '%';
};
init = function () {
var bar = new Bar( this );
this.bars.unshift( bar );
};
Bar = function ( cont ) {
this.el = document.createElement( 'div' );
this.el.id = 'nanobar';
this.width = 0;
this.here = 0;
this.moving = false;
this.cont = cont;
cont.el.appendChild( this.el );
};
Bar.prototype.go = function (num) {
if (num) {
this.here = num;
if (!this.moving) {
this.moving = true;
move.call( this );
}
} else if (this.moving) {
move.call( this );
}
};
Nanobar = function () {
var el;
this.bars = [];
el = this.el = document.createElement( 'div' );
this.el.id = 'nanodiv';
el.style.position = 'fixed';
document.getElementsByTagName( 'body' )[0].appendChild( el );
init.call( this );
};
Nanobar.prototype.go = function (p) {
this.bars[0].go( p );
if (p == 100) {
init.call( this );
}
};
return Nanobar;
})();
</script>
<body>
<div class="container">
<br>
<h1>nanobar.js</h1>
<br>
<div class="general-buttons">
<button class="doc_go" onClick="nanobar.go(30)">nanobar.go(30)</button>
<button class="doc_go" onClick="nanobar.go(60)">nanobar.go(60)</button>
<button class="doc_go" onClick="nanobar.go(100)">nanobar.go(100)</button>
</div>
<br>
<hr>
<br>
<p>© 2015 <a href="https://github.com/jacoborus">jacoborus</a> - <a href="https://raw.github.com/jacoborus/nanobar/master/LICENSE">MIT License</a></p>
</div>
<script>
var nanobar = new Nanobar();
nanobar.go(50);
</script>
</body>
<style>
/* стилизация страници */
*{
margin:0;
padding:0;
}
.container{margin:0 auto;max-width: 800px;}
/* /\/\/\/\/\/\/\/\/\/\/\ */
body {
margin: 0; /* удаляем отступы */
}
#nanobar {
background: #ff0000; /* фон */
border-radius: 0px 5px 5px 0px; /* закругление углов */
z-index: 9999; /* верхний индекс */
-webkit-box-shadow: 2px 2px 5px 0px #000000; /* тень для chrome */
-moz-box-shadow: 2px 2px 5px 0px #000000; /* тень для firexox */
box-shadow: 2px 2px 5px 0px #000000; /* тень для остальных браузеров */
filter: progid:DXImageTransform.Microsoft.shadow(direction=135, color=#000000, strength=4); /* тень для Internet Explorer */
width: 0; /* без этого полоска не хочет прятаться =) */
height: 4px; /* ширина полоски */
clear: both;
-webkit-transition: all ease; /* анимация для chrome */
-moz-transition: all ease; /* анимация для firexox */
-o-transition: all ease; /* анимация для opera */
transition: all ease; /* анимация для остальных браузеров */
}
#nanodiv {
width: 100%;
height: 5px;
z-Index: 9999;
top: 0;
}
</style>
</html>
Я написал от лени(просто нефиг делать), а нафига и сам не знаю :lol: Помогите нее куда нибудь применить :lol: |
KosBeg,
какой смысл в удалении при 100% ? |
Цитата:
PS: это форк https://github.com/jacoborus/nanobar/ :yes: |
Цитата:
имеется в виду зачем после заполения на 100% удалять его? Так на ютубе же удаляют))) |
Цитата:
|
Цитата:
я надеюсь вы видели когда делается переход на другую страницу, его удаляют)) даже лично мне кажется что его УДАЛЯТЬ НУЖНО!!! Я пробывал не удалять - получается глупо... Он постоянно в верху страницы :lol: |
Не понимаю, зачем столько JavaScript кода.
<style>
#bar {
position: absolute;
top: 0;
left: 0;
height: 3px;
background: red;
box-sizing: border-box;
-webkit-box-shadow: 1px 1px 6px 0px #333;
-moz-box-shadow: 1px 1px 6px 0px #333;
box-shadow: 1px 1px 6px 0px #333;
-o-transition: 1s width ease;
-ms-transition: 1s width ease;
-moz-transition: 1s width ease;
-webkit-transition: 1s width ease;
transition: 1s width ease;
width: 0;
}
</style>
<div id="bar" class="zero-width"></div>
<button onclick="document.getElementById('bar').style.width='30%';">(30)</button>
<button onclick="document.getElementById('bar').style.width='60%';">(60)</button>
<button onclick="document.getElementById('bar').style.width='100%';">(100)</button>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nanobar.js</title>
<style>
/* стилизация страници */
*{
margin:0;
padding:0;
}
.container{margin:0 40%; position: absolute; top: 98%; left 0; width: 280px;}
/* /\/\/\/\/\/\/\/\/\/\/\ */
body {
margin: 0; /* удаляем отступы */
height: 1500px;
position: relative;
}
#nanobar {
background: #ff0000; /* фон */
border-radius: 0px 5px 5px 0px; /* закругление углов */
z-index: 9999; /* верхний индекс */
-webkit-box-shadow: 2px 2px 5px 0px #000000; /* тень для chrome */
-moz-box-shadow: 2px 2px 5px 0px #000000; /* тень для firexox */
box-shadow: 2px 2px 5px 0px #000000; /* тень для остальных браузеров */
filter: progid:DXImageTransform.Microsoft.shadow(direction=135, color=#000000, strength=4); /* тень для Internet Explorer */
width: 0; /* без этого полоска не хочет прятаться =) */
height: 4px; /* ширина полоски */
clear: both;
-webkit-transition: all 0.8s ease; /* анимация для chrome */
-moz-transition: all 0.8s ease; /* анимация для firexox */
-o-transition: all 0.8s ease; /* анимация для opera */
transition: all 0.8s ease; /* анимация для остальных браузеров */
}
#nanodiv {
width: 100%;
height: 5px;
z-Index: 9999;
top: 0;
}
</style>
</head>
<script>
var Nanobar = (function () {
'use strict';
var Bar, Nanobar, init,
init = function () {
var bar = new Bar( this );
this.bars.unshift( bar );
};
Bar = function ( cont ) {
this.el = document.createElement( 'div' );
this.el.id = 'nanobar';
this.width = 0;
this.here = 0;
this.moving = false;
this.cont = cont;
cont.el.appendChild( this.el );
};
Bar.prototype.go = function (num) {
this.el.style.width = num + '%';
};
Nanobar = function () {
var el;
this.bars = [];
el = this.el = document.createElement( 'div' );
this.el.id = 'nanodiv';
el.style.position = 'fixed';
document.getElementsByTagName( 'body' )[0].appendChild( el );
init.call( this );
};
Nanobar.prototype.go = function (p) {
this.bars[0].go( p );
};
return Nanobar;
})();
</script>
<body>
<div class="container">
<p>© 2015 <a href="https://github.com/jacoborus">jacoborus</a> - <a href="https://raw.github.com/jacoborus/nanobar/master/LICENSE">MIT License</a></p>
</div>
<script>
var nanobar = new Nanobar();
window.onscroll = function() {
var height = window.innerHeight; //Высота экрана пользователя
var scrollHeight = document.body.scrollHeight; //Высота всей страницы
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; //Получаем при каждой прокуртке позицию скроллинга
var pos = (scrollTop/(scrollHeight-height))*100;
nanobar.go(pos);
}
window.onscroll()
</script>
</body>
</html>
|
devote,
:victory: половину выкинул, оказалось можно почти всё :) |
Цитата:
Цитата:
PS: я сегодня что-то не то курнул :lol: целый день с меня прет позитифф :lol: |
| Часовой пояс GMT +3, время: 20:33. |