Форум Сайтостроение Веб-строительство

Где взять скрипт круговой индикатор выполнения

12
S0
На сайте с 18.05.2010
Offline
65
Sori007
1501

Здравствуйте, подскажите, где можно взять скрипт круговой индикатор выполнения (пример на скриншоте), который будет выполнятся, когда его увидит пользователь?

png 2342343424.png
AS
На сайте с 12.12.2017
Offline
6
AutoSearches
#1

Вот вроде похож

https://www.cssscript.com/pure-css-circular-percentage-bar/

webiumpro
На сайте с 20.03.2017
Offline
39
webiumpro
#2

Гифку просто похожую найдите. Либо какой-нибудь конструктор, типа такого

Копирование лендингов. Разработка на фреймворке сервисов. Создание сайтов (/ru/forum/994418)
zhitov
На сайте с 30.01.2005
Offline
219
zhitov
#3

стиль

<style type="text/css">
.loader {
left: 50%;
top: 50%;
position: fixed;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.loader #spinner {
box-sizing: border-box;
stroke: #008000;
stroke-width: 3px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; }

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0);
transform: rotate(0); }
to {
-webkit-transform: rotate(450deg);
transform: rotate(450deg); } }

@keyframes rotate {
from {
-webkit-transform: rotate(0);
transform: rotate(0); }
to {
-webkit-transform: rotate(450deg);
transform: rotate(450deg); } }

@-webkit-keyframes line {
0% {
stroke-dasharray: 2, 85.964;
-webkit-transform: rotate(0);
transform: rotate(0); }
50% {
stroke-dasharray: 65.973, 21.9911;
stroke-dashoffset: 0; }
100% {
stroke-dasharray: 2, 85.964;
stroke-dashoffset: -65.973;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } }

@keyframes line {
0% {
stroke-dasharray: 2, 85.964;
-webkit-transform: rotate(0);
transform: rotate(0); }
50% {
stroke-dasharray: 65.973, 21.9911;
stroke-dashoffset: 0; }
100% {
stroke-dasharray: 2, 85.964;
stroke-dashoffset: -65.973;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } }
</style>

и в body это вставить

<div class="loader">
<svg viewBox="0 0 32 32" width="32" height="32">
<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
</svg>
</div>
Строительные калькуляторы ( https://www.zhitov.com/ )
S0
На сайте с 18.05.2010
Offline
65
Sori007
#4

Мне нужен не лаудер, а скрипт круговой индикатор выполнения, например, пользователь заходит на сайт доходит к нужной секции, и там ему показываются три круга с анимацией, и в этих кругах пишется 300 клиентов, 20 офисов, 1000 сотрудников.

AutoSearches

В этом скрипте нет анимации

zhitov
На сайте с 30.01.2005
Offline
219
zhitov
#5

Sori007, пардон, невнимателен. Температурю...

В каком-то сервисе от Гугла встречал...

Оптимизайка
На сайте с 11.03.2012
Offline
396
Оптимизайка
#6

А что, в гугле забанили?

https://www.google.com/search?q=circular+progress+bar+jquery+animation

Первый попавшийся:

http://kottenator.github.io/jquery-circle-progress/ (F5 там нажмите)

⭐ BotGuard (https://botguard.net) ⭐ — защита вашего сайта от вредоносных ботов, воровства контента, клонирования, спама и хакерских атак!
S0
На сайте с 18.05.2010
Offline
65
Sori007
#7

В гугле не забанили, я искал и находил, но все они грузились сразу, и когда пользователь доходит до нужной секции, то анимация уже сработала. А мне нужно, чтобы пользователь увидел эту анимацию. Ссылку, что вы дали на скрипт, она тоже грузит скрипт сразу

iworkshop
На сайте с 22.12.2008
Offline
195
iworkshop
#8

Вместо тысячи слов:

https://learn.javascript.ru/onscroll

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

XMLRiver - прямая выдача Google и Яндекс через API
S0
На сайте с 18.05.2010
Offline
65
Sori007
#9
iworkshop:
Вместо тысячи слов:
https://learn.javascript.ru/onscroll

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

Я в javascript ноль, поэтому я не знаю, как это подключить.

---------- Добавлено 16.12.2017 в 13:46 ----------

Я нашел, то что надо (http://jsfiddle.net/Lc83r7gf/), но после того, как я его подключаю, он не работает. Кто знает в чем проблема, может еще какой-то скрипт нужен?

Sevix
На сайте с 24.10.2011
Offline
93
Sevix
#10
Sori007:
Я нашел, то что надо (http://jsfiddle.net/Lc83r7gf/), но после того, как я его подключаю, он не работает. Кто знает в чем проблема, может еще какой-то скрипт нужен?

Не забыли подключить этот скрипт?

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий