Троббер деген не?

Троббер (ағыл. throbber — пульсация, биіу) анимирленген графикалық элемент болып табылады, ол фондық әрекеттердің, мысалы, контентті жүктеу, тапсырмаларды орындау немесе командаларды іске асыру көрсеткіші ретінде қызмет етеді. Бұл элемент веб-сайттарда, қолданбаларда немесе компьютерлік бағдарламаларда қолданылуы мүмкін. Троббердің классикалық мысалы — браузерде favicon орнындағы жаңа веб-бетті жүктелгенше көрсетілетін айналмалы шеңбер. Мұндай көрсеткіштер браузердің тақталарында дерлік әрқашан болады.

Троббердің сипаттамасы

Троббер, сонымен қатар асинхронды орындаудың көрсеткіші ретінде белгілі, прелоадердің бір түрі болып табылады. Процесс көрсеткіші (прогресс-бар) орындаудың пайызы немесе қалған уақытын көрсететін айырмашылығы троббер тек жүктеу процесінің жалғасып жатқанын көрсетеді. Ол жиі импульсивті пішінде болады, аяқталмаған процесті көрсететін визуалды әсер береді. Сондықтан троббер кейде пульсатор деп аталады.

Троббер не үшін керек?

Троббердің алғашқы қолдануы 1990 жылдардың басында Internet Explorer негізінде жасалған NCSA Mosaic веб-браузерінде болды. Дамытушылар қолданушыларға браузердің жұмыс істейтінін және беттердің жүктеліп жатқанын хабарлау үшін пульсирленген белсенділік көрсеткішін енгізді. Троббердің негізгі міндеті — қолданушыға бағдарламаның тоқтап қалмағанын, әрекеттерді орындауды жалғастырып жатқанын көрсету.

Қосымша функциялар

Жүктеу процесін хабарлаумен қатар, троббер сайт не бағдарлама туралы қолданушының жақсы әсерін жақсартады. Мазмұнды, мысалы стильдерді, қаріптерді және суреттерді жүктеу кезінде элементтер біркелкі жүктелмеуі мүмкін. Троббер бұл көрінеді нашар сәттерді жасырады, сол үшін қолданушы бос немесе дұрыс көрсетілмеген элементтерді көрмейді. Сондай-ақ троббер:

• Шығармашылық анимацияларға назар аударып, пайдаланушыларды тарту.
• Жылдам прогресс иллюзиясын жасап күтуден алаңдату.
• Логотиптер немесе ерекше жазулар арқылы брендті тануды арттыру.

Троббер қай жерде қолданылады?

Троббер, сайтты жүктеу күтілгеннен көп уақыт алғанда немесе серверден жауап болмағанда пайда болады. Сіз жүктеу белгішесін келесі жерлерде көре аласыз:

• Браузердегі сайт қойындысында.
• Браузердің іздеу жолағында.
• Бетті жүктеу кезінде экранда.
• Баяу жүктелетін элементтерде, мысалы суреттер немесе бейнелер.
• Мобильді қолданбаларда және бағдарламаларда.

Троббер ресурсты толық жасырып немесе онымен әрекеттесуге мүмкіндік беруі мүмкін, мысалы, жүктеуді тоқтату немесе басты бетке оралу. Егер ресурс толық жасырылған болса, пайдаланушы жүктеу аяқталғанша күтуі ғана қалады.

Троббер көрсетілімінің нұсқалары

Веб-браузерлердегі алғашқы қолдану кезінде тробберлер бағдарлама логотипінің анимацияланған түрінде болған, және бұл әдіс бүгінге дейін танымал болып қалды. Кейінірек айналмалы сақиналы белгіше пайда болып, кеңінен танымал болды, ол спиннер деп аталады. Ол әртүрлі стильдерде көруге болады, компанияның фирмалық стилі және сайттың дизайнына байланысты.

Жүктеу анимациясына қойылатын негізгі талаптардың бірі — оның динамикалығы. Ең жиі қолданылатын прелоадер нұсқалары мыналарды қамтиды:

• Шеңбер формасындағы жыпылықтайтын нүктелер.
• Консольдық бағдарламаларда өзгертетін таңбалар.
• Анимирленген GIF немесе CSS-анимациялар.

Тробберді код білмей сайтқа қалай қосуға болады

Жүктеу анимациясын сайтқа қосу үшін бағдарламаушы болу міндетті емес. Бірнеше қарапайым әдістер бар:

Арнайы қызметтер

Сіз жүктеу анимациясын жасау немесе жүктеу және кіргізу кодын генерлеуге мүмкіндік беретін онлайн қызметтерді қолданыңыз. Мұндай қызметтердің мысалдары:

• Hello-site.ru-нің прелоадер конструкторы.
• Codepen.
• Loading.io.
• Svgator.
• CSS Loader Generator.

Анимацияны жасағаннан кейін алынған HTML немесе CSS кодын жай ғана көшіріңіз.

WordPress үшін плагиндер

WordPress сайттары үшін арнайы плагиндер қолжетімді, мысалы, LoftLoader, WP Smart Preloader немесе «Прелоадер». Плагинді орнатып және іске қосқаннан кейін, қалаған дизайнды таңдап және элементті реттеуге болады.

Сайт конструкторларының кірістірілген функциялары

Кейбір сайт конструкторларында троббер немесе жүктеу анимациясын қосуға арналған кірістірілген функциялар бар. Мысалы, Tilda-да «микроанимация» элементін, «Т228» блогын беттің жоғарғы жағына қосып қолдануға болады.