Показать сообщение отдельно
  #1 (permalink)  
Старый 16.06.2015, 12:15
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

nanobar.js - очень легкий прогрес-бар
Всем привет!
Сам не знаю нафига , написал(а точнее отредактировал) такую штуку
<!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>

Я написал от лени(просто нефиг делать), а нафига и сам не знаю
Помогите нее куда нибудь применить
Ответить с цитированием