powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Кружочек ожидания
10 сообщений из 10, страница 1 из 1
Кружочек ожидания
    #38801893
Елдос
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Как можно сделать кружочек ожидания на сайте,
когда пользователь ждет какой нибудь процесс чтобы на экране кружилась или что то подобное, чтобы не томить его ожиданием.
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38801944
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ЕлдосКак можно сделать кружочек ожидания на сайте,
когда пользователь ждет какой нибудь процесс чтобы на экране кружилась или что то подобное, чтобы не томить его ожиданием.

.. их океан ... например
NETEYE Activity Indicator
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38803534
Елдос
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
carrotikЕлдосКак можно сделать кружочек ожидания на сайте,
когда пользователь ждет какой нибудь процесс чтобы на экране кружилась или что то подобное, чтобы не томить его ожиданием.

.. их океан ... например
NETEYE Activity Indicator
у меня не получилось, есть ли какой нибудь пример,
сделал как на этом сайте но у меня не вертится.
есть ли у вас какой нибудь другой пример с инструкцией
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38803664
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Елдосcarrotikпропущено...


.. их океан ... например
NETEYE Activity Indicator
у меня не получилось, есть ли какой нибудь пример,
сделал как на этом сайте но у меня не вертится.
есть ли у вас какой нибудь другой пример с инструкцией

.. да я у себя делал все по дефолту и все работает ....

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<head>
<script type="text/javascript" src="/Scripts/jquery.activity-indicator-1.0.0.js"></script>
</head>
<body>
<div id="indicatordiv">
            <span id="Label1"></span>
        </div>
</body>



... а в скрипте загрузки
Код: javascript
1.
2.
3.
$( "#indicatordiv" ).activity();
// ... loading data ...
$( "#indicatordiv" ).activity( false );



... в самом файле плугина вроде ничего не менял .. а может и менял, не помню .. :)
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38803676
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
... да, кстати, грузить его надо после загрузки самой jQuery, разумеется ...
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38804225
Елдос
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: javascript
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.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
[/SRC][quot carrotik]... да, кстати, грузить его надо после загрузки самой jQuery, разумеется ...[/quot]

[SRC HTML]<%--
  Created by IntelliJ IDEA.
  User: ytanikin
  Date: 12.11.2014
  Time: 17:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #11406c;
    color: #555;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    line-height: 2em;
    text-rendering: optimizeLegibility;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .readme { font-size: 11px; }
    pre { font-size: 10px; }
}

a {
    color: #297fbb;
}
a img {
    border: none;
}
ul {
    list-style: none !important;
    list-style: square;
    padding: 0;
}
li:before {
    content: "\203a \a0 \a0";
    font-weight: bold;
}

#header {
    height: 236px;
    background: #11406c url(bg2.jpg) center top no-repeat;
    color: #fff;
}
#header .container {
    position: relative;
    height: 173px;
    border-bottom: 1px solid #2f92d7;
}
#logo {
    display: block;
    text-indent: -999em;
    width: 131px;
    height: 22px;
    position: relative;
    left: -16px;
    top: 20px;
    background-repeat: no-repeat;
}
.svg #logo {
    background-image: url(logo.svg);
}
.no-svg #logo {
    background-image: url(logo.png);
    _background-image: url(logo.gif);
}

#path {
    position: absolute;
    left: 0px;
    bottom: 7px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}
#path .active {
    color: #2f92d7;
}
#path a {
    color: #fff;
    text-decoration: none;
}

#wrapper {
    margin-top: -50px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -200px;
    background:#fff;
    position: relative;
    min-width: 1024px;
}
#footer {
    height: 200px;
    background: #202020;
    min-width: 1024px;
}
#footer .center {
    position: relative;
    height: 200px;
}
#footer .github {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 20px;
    width: 68px;
    height: 30px;
    background: url(github.gif) no-repeat;
    text-indent: -999em;
}

.center {
    width: 1000px;
    margin: 0 auto;
    padding: 0 8px 0 16px;
}
#content .center {
    margin-top: -50px;
    margin-bottom: 200px;
    min-height: 50px;
    height: auto !important;
    height: 50px;
}
#content .solid {
    background: #fff;
    padding-bottom: 60px;
}
#content .plugin {
    background: #dbe9ee;
    padding: 40px 60px;
    margin-bottom: 20px;
}
#content .plugin a {
    text-decoration: none;
}
#content .plugin p {
    color: #555;
}
#hero {
    display: block;
    margin: 0 2px 60px 2px;
}
.readme h2 {
    font-size: 18px;
    margin-top: 3em;
}

#github-links a {
    display: block;
    font-weight: bold;
}

a.zip {
    display: block;
    height: 142px;
    background: url(zip.png) -25px 0 no-repeat;
    padding: 0 0 0 110px;
    font-weight: bold;
    text-decoration: none;
}

.highlight {
    padding: 20px 2px 20px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
pre {
    line-height: 1.5em;
}

dt {
    font-family: monospace;
    font-weight: bold;
}

table h1,
table h2 {
    color: #277fb9;
}
table td {
    background: #dbe9ee;
    vertical-align: top;
}
td.left {
    width: 284px;
    padding: 50px 20px 40px 40px;
}
td.right {
    padding: 50px 40px 40px 46px;
}

#forkme {
    position: fixed;
    width: 150px;
    height: 150px;
    top: 0;
    right: 0;
    overflow: hidden;
    display: none;
}
.transform #forkme {
    display: block;
}
.mobile-safari #forkme {
    position: absolute;
}

.ribbon {
    background-color: #ffca00;
    position: absolute;
    right: -47px;
    top: 34px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-box-shadow: 0 0 1em rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 1em rgba(0,0,0,0.5);
}
.ribbon a {
    border: 1px solid #ffe994;
    color: #000;
    display: block;
    font: bold 11px 'Helvetiva Neue', Helvetica, Arial, sans-serif;
    margin: 2px 0;
    padding: 3px 41px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 2px #ffe994;
}
</style>
<div  class="square" id="bisy4"><div style="width: 68px; height: 68px; position: absolute; margin-top: 46px; margin-left: 56px; -webkit-animation:
spin12 0.7s linear infinite;"><svg style="width: 68px; height: 68px;">
    <g transform="translate(34,34)">
        <g stroke-width="5.5" stroke-linecap="round" stroke="#252525">
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(0, 0, 0)" opacity="1"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(30, 0, 0)" opacity="0.9173553719008265"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(60, 0, 0)" opacity="0.8347107438016529"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(90, 0, 0)" opacity="0.7520661157024794"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(120, 0, 0)" opacity="0.6694214876033058"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(150, 0, 0)" opacity="0.5867768595041323"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(180, 0, 0)" opacity="0.5041322314049588"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(210, 0, 0)" opacity="0.42148760330578516"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(240, 0, 0)" opacity="0.33884297520661155"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(270, 0, 0)" opacity="0.25619834710743805"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(300, 0, 0)" opacity="0.17355371900826455"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(330, 0, 0)" opacity="0.09090909090909094"></line>
        </g></g></svg></div>
</div>

</body>
<script type="text/javascript" src="/includes/jquery.activity-indicator-1.0.0.js" >&#160;</script>
<script src="/includes/jquery-1.11.1.min.js" >&#160;</script>
</html>


я все скопировал, что же не так,
можете посмотреть?
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38804515
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Елдос,

...загрузку файлов библиотек вынесите в <head></head> (туда же и определение стилей, кстати) .. и я же специально подчеркнул выше: сначала jQuery, потом плугин ... т.е.

Код: html
1.
2.
3.
4.
<head>
<script src="/includes/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="/includes/jquery.activity-indicator-1.0.0.js" ></script>
</head>
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38804705
Елдос
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
carrotikЕлдос,

...загрузку файлов библиотек вынесите в <head></head> (туда же и определение стилей, кстати) .. и я же специально подчеркнул выше: сначала jQuery, потом плугин ... т.е.

Код: html
1.
2.
3.
4.
<head>
<script src="/includes/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="/includes/jquery.activity-indicator-1.0.0.js" ></script>
</head>



ага сделал как вы и сказали,
все так же.
не вертится
Код: html
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.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
<%--
  Created by IntelliJ IDEA.
  User: ytanikin
  Date: 12.11.2014
  Time: 17:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="/includes/jquery-1.11.1.min.js" ></script>
    <script type="text/javascript" src="/includes/jquery.activity-indicator-1.0.0.js" ></script>

    <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #11406c;
        color: #555;
        font-family: Arial, Sans-Serif;
        font-size: 12px;
        line-height: 2em;
        text-rendering: optimizeLegibility;
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
        .readme { font-size: 11px; }
        pre { font-size: 10px; }
    }

    a {
        color: #297fbb;
    }
    a img {
        border: none;
    }
    ul {
        list-style: none !important;
        list-style: square;
        padding: 0;
    }
    li:before {
        content: "\203a \a0 \a0";
        font-weight: bold;
    }

    #header {
        height: 236px;
        background: #11406c url(bg2.jpg) center top no-repeat;
        color: #fff;
    }
    #header .container {
        position: relative;
        height: 173px;
        border-bottom: 1px solid #2f92d7;
    }
    #logo {
        display: block;
        text-indent: -999em;
        width: 131px;
        height: 22px;
        position: relative;
        left: -16px;
        top: 20px;
        background-repeat: no-repeat;
    }
    .svg #logo {
        background-image: url(logo.svg);
    }
    .no-svg #logo {
        background-image: url(logo.png);
        _background-image: url(logo.gif);
    }

    #path {
        position: absolute;
        left: 0px;
        bottom: 7px;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
    }
    #path .active {
        color: #2f92d7;
    }
    #path a {
        color: #fff;
        text-decoration: none;
    }

    #wrapper {
        margin-top: -50px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -200px;
        background:#fff;
        position: relative;
        min-width: 1024px;
    }
    #footer {
        height: 200px;
        background: #202020;
        min-width: 1024px;
    }
    #footer .center {
        position: relative;
        height: 200px;
    }
    #footer .github {
        display: block;
        position: absolute;
        right: 10px;
        bottom: 20px;
        width: 68px;
        height: 30px;
        background: url(github.gif) no-repeat;
        text-indent: -999em;
    }

    .center {
        width: 1000px;
        margin: 0 auto;
        padding: 0 8px 0 16px;
    }
    #content .center {
        margin-top: -50px;
        margin-bottom: 200px;
        min-height: 50px;
        height: auto !important;
        height: 50px;
    }
    #content .solid {
        background: #fff;
        padding-bottom: 60px;
    }
    #content .plugin {
        background: #dbe9ee;
        padding: 40px 60px;
        margin-bottom: 20px;
    }
    #content .plugin a {
        text-decoration: none;
    }
    #content .plugin p {
        color: #555;
    }
    #hero {
        display: block;
        margin: 0 2px 60px 2px;
    }
    .readme h2 {
        font-size: 18px;
        margin-top: 3em;
    }

    #github-links a {
        display: block;
        font-weight: bold;
    }

    a.zip {
        display: block;
        height: 142px;
        background: url(zip.png) -25px 0 no-repeat;
        padding: 0 0 0 110px;
        font-weight: bold;
        text-decoration: none;
    }

    .highlight {
        padding: 20px 2px 20px 0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    pre {
        line-height: 1.5em;
    }

    dt {
        font-family: monospace;
        font-weight: bold;
    }

    table h1,
    table h2 {
        color: #277fb9;
    }
    table td {
        background: #dbe9ee;
        vertical-align: top;
    }
    td.left {
        width: 284px;
        padding: 50px 20px 40px 40px;
    }
    td.right {
        padding: 50px 40px 40px 46px;
    }

    #forkme {
        position: fixed;
        width: 150px;
        height: 150px;
        top: 0;
        right: 0;
        overflow: hidden;
        display: none;
    }
    .transform #forkme {
        display: block;
    }
    .mobile-safari #forkme {
        position: absolute;
    }

    .ribbon {
        background-color: #ffca00;
        position: absolute;
        right: -47px;
        top: 34px;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-box-shadow: 0 0 1em rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 0 1em rgba(0,0,0,0.5);
    }
    .ribbon a {
        border: 1px solid #ffe994;
        color: #000;
        display: block;
        font: bold 11px 'Helvetiva Neue', Helvetica, Arial, sans-serif;
        margin: 2px 0;
        padding: 3px 41px;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 0 2px #ffe994;
    }
    </style>
</head>
<head>
    <title></title>
</head>
<body>

<div  class="square" id="bisy4"><div style="width: 68px; height: 68px; position: absolute; margin-top: 46px; margin-left: 56px; -webkit-animation:
spin12 0.7s linear infinite;"><svg style="width: 68px; height: 68px;">
    <g transform="translate(34,34)">
        <g stroke-width="5.5" stroke-linecap="round" stroke="#252525">
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(0, 0, 0)" opacity="1"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(30, 0, 0)" opacity="0.9173553719008265"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(60, 0, 0)" opacity="0.8347107438016529"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(90, 0, 0)" opacity="0.7520661157024794"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(120, 0, 0)" opacity="0.6694214876033058"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(150, 0, 0)" opacity="0.5867768595041323"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(180, 0, 0)" opacity="0.5041322314049588"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(210, 0, 0)" opacity="0.42148760330578516"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(240, 0, 0)" opacity="0.33884297520661155"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(270, 0, 0)" opacity="0.25619834710743805"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(300, 0, 0)" opacity="0.17355371900826455"></line>
            <line x1="0" y1="17" x2="0" y2="30" transform="rotate(330, 0, 0)" opacity="0.09090909090909094"></line>
        </g></g></svg></div>
</div>
</body>

</html>
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38804899
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Елдос,

... я не пойму, а где вы его запускаете-то? ... вообще-то, он вызывается (и потом закрывается) в аяксовом вызове, например через $('#selector').activity() ...

добавьте перед закрывающим тегом </body> вот такой скрипт, например

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
<body>
...
...
<script>
	$(function() {
             $('#bisy4').activity();
        });
</script>
</body>



... должен закрутиться ... или я не понял, каким образом вы его хотите прицепить ...
...
Рейтинг: 0 / 0
Кружочек ожидания
    #38805658
Елдос
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
carrotikЕлдос,

... я не пойму, а где вы его запускаете-то? ... вообще-то, он вызывается (и потом закрывается) в аяксовом вызове, например через $('#selector').activity() ...

добавьте перед закрывающим тегом </body> вот такой скрипт, например

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
<body>
...
...
<script>
	$(function() {
             $('#bisy4').activity();
        });
</script>
</body>



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

в код добавил только вас скрипт, он заработал,
но почему то появился вторая маленький кружочек выше от него и правее
...
Рейтинг: 0 / 0
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Кружочек ожидания
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]