Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2015, 19:22
Новичок на форуме
Отправить личное сообщение для sem505 Посмотреть профиль Найти все сообщения от sem505
 
Регистрация: 09.10.2015
Сообщений: 3

сделать псевдопрогресс-бар
Нужно сделать псевдопрогресс-бар (обращаю внимание на Псевдо, нужна просто анимация)

визуальное оформление есть:


<style>
.t {font-weight:bold}
.t {margin-top:150px;}

.lpb{width:250px;border:1px solid #999;padding:1px;height:8px;margin: 10px ;}
.lpt{
width:0; height:100%; background-color:#6188f5;
background-repeat:repeat-x; background-position:0 0;
background-size:16px 8px;
background-image:linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 66%,transparent 66%,transparent); }
</style>

<div class="t">Загрузка пожалуйста подождите</div>
<div class="lpb"> <div style="width: 10%;" class="lpt"></div></div></div>


Необходимо сделать что он был анимирован, т.е. шкала увеличивалась .
Была мысль привязать на width: 10% ява скрип чтобы увеличивал показание, но что то не догоняю как это реализовать.


<script>
$(function () {
$({
n: 0
}).animate({
n: 1E3
}, {
duration: 20E3,
step: function (a) {
$("#test").html(a | 0)
}
})
});
</script>

<div id="test"></div>


Прошу дельного совета.


кстати последний скрипт требует jquery-1.9.1.js
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2015, 19:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

sem505,
nanobar.js - очень легкий прогрес-бар
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2015, 20:04
Новичок на форуме
Отправить личное сообщение для sem505 Посмотреть профиль Найти все сообщения от sem505
 
Регистрация: 09.10.2015
Сообщений: 3

обязательное требование привязать к существующему дизайну
Ответить с цитированием
  #4 (permalink)  
Старый 09.10.2015, 20:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от sem505
обязательное требование привязать к существующему дизайну
читать про css
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2015, 20:18
Новичок на форуме
Отправить личное сообщение для sem505 Посмотреть профиль Найти все сообщения от sem505
 
Регистрация: 09.10.2015
Сообщений: 3

за скрип спасибо с дизайном разобрался, один вопрос, как задать интервал движения чтобы шел секунд 10
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2015, 20:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от sem505
шел секунд 10
читать про css всётаки
transition: all 0.8s ease;
Ответить с цитированием
  #7 (permalink)  
Старый 10.10.2015, 15:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

sem505,
CSSProgress
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
filter(this,this) как правильно сделать? Smip jQuery 5 23.02.2013 03:07
Как сделать что бы при регистрации человека на моем сайте у него не появлялось... drunkwolfs Общие вопросы Javascript 2 07.08.2012 10:58
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
Нужно сделать плавное появление текстового поля как на сайте vkontakte.ru paratrooper1981 Элементы интерфейса 1 23.11.2009 18:24
Помогите сделать такое меню(( Lilith Я не знаю javascript 2 02.06.2009 02:31