Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
exploze
0 / 0 / 3
Регистрация: 11.05.2015
Сообщений: 64
1

Анимация загрузки во время загрузки

23.07.2015, 13:58. Просмотров 1117. Ответов 3
Метки нет (Все метки)

Есть скрипт который создает анимацию загрузки страницы, но мне надо бы что бы эта анимация появилась во время когда я загружаю файл или картинку не важно..
Javascript
1
2
3
4
  
 $(window).load(function(){
        $(".preloader").delay(1000).fadeOut("slow")
    });
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.07.2015, 13:58
Ответы с готовыми решениями:

Анимация загрузки аяксом фотогалереи в выбранный div
В Общем такая проблема. Загружаю хтмл код bag.html, содержащей jquery-галерею...

Полоса загрузки изображения, отобразить прогресс загрузки
загружаю изображения на сервер с помощью аякса, подскажите как можно узнать(с...

надпись во время загрузки
есть селекты , в которые должны подгрузится опшены путем .load('somepage.php')...

Замена рисунка во время загрузки блока
$(document).ready(function(){ $("#but_test").click(function(){ ...

Выполнение js кода во время загрузки страницы
Всем привет, есть некая функция необходимо что бы она отрабатывала во время...

3
Karssen
151 / 151 / 66
Регистрация: 25.02.2015
Сообщений: 492
23.07.2015, 16:59 2
А можете скинуть кусок кода где используется .preloader и его css?
0
exploze
0 / 0 / 3
Регистрация: 11.05.2015
Сообщений: 64
23.07.2015, 17:33  [ТС] 3
да в принципе, его можно за 2 сек написать самому, или найти по вкусу в интернете.

После body код

HTML5
1
2
3
4
5
6
7
8
   <div class="preloader" id="preloader">
        <div class="item">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>
    </div>
Стили
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.preloader{
    position:fixed;
    background:white;
    z-index:9999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
 
.preloader .item{
    position:absolute;
    width:50px;
    height:50px;
    left:50%;
    top:50%;
    margin-left:-25px;
    margin-top:-25px;
} 
 
.double-bounce1, 
.double-bounce2 {
    width: 100%;
    height: 100%; 
    border-radius: 50%;
    background-color: #222222;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}
 
.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
 
@-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}
 
@keyframes bounce {
    0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}
0
Karssen
151 / 151 / 66
Регистрация: 25.02.2015
Сообщений: 492
24.07.2015, 14:11 4
Возможно я не совсем правильно понял. Если вам нужно чтоб во время подгрузки картинок например в галерее, пока эта картинка загружается выплясывали 2 круга серых, то сделать это можно только методами цсс. Например как в [ATTACH]здесь[/ATTACH]. Если это то что нужно и есть вопросы как это сделать, то спрашивайте. Если нет, то сори)
0
Вложения
Тип файла: zip Простенькая Галерея на JQ.zip (213.8 Кб, 2 просмотров)
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.07.2015, 14:11

AJAX блокирование кнопки во время загрузки
При нажатии на кнопку происходит подгрузка данных сервера. Проблема в том, что...

Анимация загрузки страницы
Есть php скрипт, который очень долго обрабатывает информацию, около 15-20 сек....

Кнопка загрузки файла и индикатор загрузки в этой же кнопке
Как из двух input &lt;form action=&quot;change_avatar.php&quot; method=&quot;post&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru