Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   nanobar.js - очень легкий прогрес-бар (https://javascript.ru/forum/project/56438-nanobar-js-ochen-legkijj-progres-bar.html)

KosBeg 16.06.2015 12:15
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:

рони 16.06.2015 12:48
KosBeg,
какой смысл в удалении при 100% ?

KosBeg 16.06.2015 12:50
Цитата:
Сообщение от рони
какой смысл в удалении при 100% ?
а черт его знает :lol:
PS: это форк https://github.com/jacoborus/nanobar/ :yes:

KosBeg 16.06.2015 12:53
Цитата:
Сообщение от рони
какой смысл в удалении при 100% ?
стоп!
имеется в виду зачем после заполения на 100% удалять его?
Так на ютубе же удаляют)))

рони 16.06.2015 12:56
Цитата:
Сообщение от KosBeg
имеется в виду зачем после заполения на 100% удалять его?
Так на ютубе же удаляют)))
непостижимая для меня логика

KosBeg 16.06.2015 12:59
Цитата:
Сообщение от рони
непостижимая для меня логика
это как-бэ прогрег-бар аякс запроса, как на ютубе)
я надеюсь вы видели когда делается переход на другую страницу, его удаляют))
даже лично мне кажется что его УДАЛЯТЬ НУЖНО!!!
Я пробывал не удалять - получается глупо...
Он постоянно в верху страницы :lol:

devote 16.06.2015 14:54
Не понимаю, зачем столько 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>

рони 16.06.2015 15:18
Цитата:
Сообщение от KosBeg
Помогите нее куда нибудь применить
индикация скрола
<!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>

рони 16.06.2015 15:19
devote,
:victory:
половину выкинул, оказалось можно почти всё :)

KosBeg 16.06.2015 17:03
Цитата:
Сообщение от рони
половину выкинул, оказалось можно почти всё
Цитата:
Сообщение от devote
Не понимаю, зачем столько JavaScript кода.
пойду повешусь :lol:

PS: я сегодня что-то не то курнул :lol:
целый день с меня прет позитифф :lol:

KosBeg 16.06.2015 17:09
PS: вопрос: а я со стороны сильно на дурака похож? :cray:

nerv_ 16.06.2015 17:23
KosBeg, не сильно :D

KosBeg 16.06.2015 17:29
Цитата:
Сообщение от nerv_
не сильно :D
спасибо, я понял :D

Gozar 17.06.2015 14:28
Цитата:
Сообщение от KosBeg
со стороны сильно на дурака похож?
Такие вопросы заставляют непроизвольно задуматься... :D

А ты хочешь?

Gozar 17.06.2015 14:31
Цитата:
Сообщение от devote
Не понимаю, зачем столько JavaScript кода.
Кстати, а где бегущий заборчик по линии, ведь ответ с сервера может прийти не сразу, а 100% будет висеть долго, будет чувство, что зависло, даже если оно зависло? Или лучше после загрузки менять цвет, чтобы было понятно, что контент ушёл, и обрабатывается, при этом ответ с сервера, ещё не получен.

Это я не придираюсь, так, для себя поведение продумываю, мне к концу дня прикрутить нужно такую "полосочку".

devote 17.06.2015 14:43
Цитата:
Сообщение от Gozar
а 100% будет висеть долго
начнем с того что 100% это значит что операция выполнена. И явно прогрес уже ничего не должен показывать, а просто пропасть/исчезнуть/поменяться/и т.д и т.п.

Gozar 17.06.2015 14:52
Цитата:
Сообщение от devote
пропасть/исчезнуть/поменяться/
На что он должен поменяться а? Ответ от сервера ещё не получен, если в процессе обработки на сервере будет падение, то 100% загрузки будет 100% лож! Для пользователя никакой разницы, загружено обработано. Я понимаю, если ютюб пишешь или гигабайтный аплоадер, но в простом случае, лично для меня, т.к. я для себя продумываю, будет достаточно изменить цвет или добавить бегущий забор прямо в линию, что будет говорить о том, что процесс идет.

зып: Я тебе выше написал:
Цитата:
Сообщение от Gozar
я не придираюсь, так, для себя поведение продумываю

KosBeg 17.06.2015 14:52
Цитата:
Сообщение от Gozar
Такие вопросы заставляют непроизвольно задуматься... :D
А ты хочешь?
Сегодня не хочу :(
Вчера было очень хорошое настроение, а сегодня его нету...:cray:

Gozar 17.06.2015 14:58
Цитата:
Сообщение от KosBeg
Вчера было очень хорошое настроение, а сегодня его нету...
http://habrahabr.ru/post/260249/

devote 17.06.2015 15:03
Цитата:
Сообщение от Gozar
Ответ от сервера ещё не получен, если в процессе обработки на сервере будет падение, то 100% загрузки будет 100% лож!
вообще то при падении сервера пользователь должен получить ошибку/сообщение/и т.д. А во вторых не нужно ставить 100% прогресу если ожидается ответ от сервера (причем не важно какой, успешный или нет). 100% ставить нужно когда полностью все готово и загрузка и обработка. После постановки в 100% прогрес можно будет спрятать. Если прогрес виден, значит идет загрузка/обработка/работа/действие и т.д.

Цитата:
Сообщение от Gozar
я не придираюсь, так, для себя поведение продумываю
Я и не спорю =)

KosBeg 17.06.2015 15:17
Цитата:
Сообщение от Gozar
:dance:
У меня было хорошее настроение, ибо вчера должны были открыть один важный для меня сайт, коротой я ждал месяц,
А сегодня открытие перенесли еще на неделю...

Gozar 17.06.2015 15:21
Цитата:
Сообщение от devote
100% ставить нужно когда полностью все готово и загрузка и обработка
Нелогично. Тормоза бывают разные и если помещать всё в одну полосу, то:

100% загрузки есть, ставим 100%, обработка идет, добавляем забор(в полосу можно дописать"обработка"), получен ответ - отключаем полосу и выводим всплывающее сообщение "сохранено".

Так я пожалуй и сделаю. Конечно можно разбить действия на части и всплытий всяких надобавлять, но в одну полосу будет интуитивней.

devote 17.06.2015 16:24
Цитата:
Сообщение от Gozar
добавляем забор(в полосу можно дописать"обработка"),
Ты про это чтоль?
<style>
  #bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    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;
    overflow: hidden;
  }

  #bar:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 50px;
    height: 100%;
    animation: trololo 2s linear infinite;
    background: linear-gradient(45deg, red 15%, white 50%, red 85%);
    margin-left: -25px;
  }

  @keyframes trololo {
    from {
      left: 0;
    }

    to {
      left: 100%;
    }
  }
</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>

Gozar 17.06.2015 16:39
Цитата:
Сообщение от devote
Ты про это чтоль?
да, типа того :)


Часовой пояс GMT +3, время: 15:47.