
Курсор в виде круга с точкой или стрелкой внутри – это индикатор режима панорамирования (pan mode) в браузерах и некоторых графических редакторах. Он появляется, когда пользователь активирует инструмент перемещения по карте, изображению или веб-странице без изменения масштаба. В большинстве случаев этот курсор сигнализирует о возможности свободного перетаскивания контента мышью или тачпадом, что характерно для интерактивных карт (Google Maps, Яндекс.Карты), PDF-документов и веб-приложений с поддержкой жестов.
В браузерах курсор-круг часто возникает при удержании клавиши Пробел (в Chrome, Firefox) или при нажатии средней кнопки мыши. Это временный режим, который отключается после отпускания клавиши или кнопки. В графических редакторах (например, Figma, Photoshop) аналогичный курсор включается при выборе инструмента Hand Tool (горячая клавиша H) и позволяет быстро перемещаться по холсту без использования полос прокрутки.
Если курсор застревает в виде круга без явных причин, проверьте следующие моменты:
- Отпустите зажатые клавиши (Пробел, Ctrl, Shift) – они могут блокировать возврат к стандартному курсору.
- Обновите страницу (F5 или Ctrl+R), если курсор не меняется после взаимодействия с картой или интерактивным элементом.
- Проверьте настройки браузера: в Chrome откройте chrome://flags и сбросьте экспериментальные функции, связанные с жестами.
- В Windows перезапустите Проводник через Диспетчер задач, если курсор не реагирует на действия.
Для разработчиков: чтобы принудительно задать курсор-круг в CSS, используйте свойство cursor: grab (активный режим) или cursor: grabbing (при перетаскивании). Эти значения поддерживаются всеми современными браузерами и обеспечивают единообразие интерфейса. Избегайте использования cursor: move – он визуально отличается и предназначен для перемещения элементов, а не прокрутки.
Какие браузеры и программы отображают курсор-круг
Курсор в виде круга с точкой в центре чаще всего встречается в браузерах на основе Chromium. Google Chrome, начиная с версии 80, использует этот курсор при наведении на интерактивные элементы, поддерживающие прокрутку или перетаскивание, например, карты Google Maps или drag-and-drop интерфейсы. Аналогичное поведение наблюдается в Microsoft Edge (начиная с версии 80), Opera (версии 67+), Yandex Browser и Brave. В этих браузерах курсор-круг сигнализирует о возможности перемещения контента или изменения его положения.
Mozilla Firefox поддерживает курсор-круг только в ограниченных сценариях. Он появляется при использовании CSS-свойства *cursor: grab* или *cursor: grabbing*, но не в нативных интерфейсах браузера. Для активации круглого курсора в Firefox требуется явное указание через стили или JavaScript, в отличие от Chromium-браузеров, где он отображается автоматически для определённых элементов.
В Safari (macOS и iOS) курсор-круг встречается реже. На десктопе он появляется при взаимодействии с элементами, где задан *cursor: grab*, но не в стандартных интерфейсах Apple Maps или других встроенных сервисах. На iOS Safari использует аналогичный жест, но визуально курсор не отображается – вместо этого система показывает анимацию увеличения при долгом нажатии на перетаскиваемый элемент.
Программы для работы с графикой и дизайном также применяют курсор-круг. В Figma и Adobe XD он появляется при перемещении объектов или изменении их размеров. В Sketch аналогичный курсор используется для перетаскивания слоёв. В этих приложениях круглый курсор часто сопровождается дополнительными визуальными подсказками, например, направляющими линиями или выделением границ.
В играх и приложениях с трёхмерной навигацией курсор-круг встречается в инструментах типа Unity Editor или Blender. В Unity он отображается при использовании инструмента *Hand Tool* для перемещения камеры в сцене. В Blender аналогичный курсор появляется при нажатии *Shift + средняя кнопка мыши* для панорамирования вида. В обоих случаях круглый курсор служит индикатором режима навигации, а не редактирования.
Для проверки поддержки курсора-круга в браузере можно использовать следующий код: *document.body.style.cursor = ‘grab’*. Если курсор изменится на круг с точкой, браузер поддерживает этот тип. В противном случае отобразится стандартный курсор или его ближайший аналог. На мобильных устройствах курсор-круг заменяется жестами, поэтому тестирование стоит проводить на десктопных версиях.
Почему курсор меняется на круг при загрузке страницы
Основные причины смены курсора на круг:
| Причина | Пример кода | Решение |
|---|---|---|
| Синхронные XHR-запросы | xhr.open('GET', url, false); |
Замените на fetch() с async/await |
| Рекурсивные функции без задержек | function heavyLoop(n) { if (n > 0) heavyLoop(n-1); } |
Добавьте setTimeout(..., 0) для разбивки на микротаски |
| Блокирующие CSS-анимации | @keyframes block { 0% { transform: scale(1); } 100% { transform: scale(2); } } |
Используйте will-change: transform и transform: translateZ(0) |
Для предотвращения проблемы оптимизируйте критические пути рендеринга. Разбейте JavaScript на чанки с помощью import() или Webpack. Отложите некритичный код с requestIdleCallback(). В React используйте React.lazy() для ленивой загрузки компонентов. Для тяжёлых вычислений применяйте Web Workers – они не блокируют UI-поток. Проверяйте FPS в *Rendering* → *Frame Rendering Stats* DevTools: значения ниже 60 FPS указывают на необходимость оптимизации.
Если курсор крутится дольше 300 мс, добавьте пользовательский индикатор загрузки (например, спиннер) с position: fixed, чтобы визуально смягчить ожидание. Отключите системный курсор через CSS: body.waiting { cursor: progress !important; }. Для анализа блокировок используйте Lighthouse в режиме *Performance* или инструмент *WebPageTest* с параметром *CPU Throttling*.
Как отличить курсор загрузки от других типов курсоров
Другие системные курсоры имеют чёткие функции: стрелка указывает на элементы интерфейса, рука появляется при наведении на ссылки, I-образный курсор – в текстовых полях, а перекрестие – в графических редакторах. Курсор загрузки не реагирует на действия пользователя: его нельзя переместить мышью или использовать для выбора объектов. Если при попытке кликнуть или ввести текст курсор остаётся анимированным – это однозначный признак процесса загрузки.
В браузерах курсор загрузки часто сопровождается дополнительными индикаторами: вращающимся значком вкладки (Chrome, Firefox) или прогресс-баром в адресной строке. На веб-страницах его может заменять кастомный спиннер, но системный курсор загрузки сохраняется при блокировке интерфейса (например, во время AJAX-запросов). Если курсор внезапно сменился на загрузочный без видимых причин – проверьте диспетчер задач на предмет зависших процессов.
В каких случаях круглый курсор появляется на картах и в навигаторах
В мобильных навигаторах круглый курсор часто появляется при первом запуске приложения или после длительного перерыва в использовании. Это связано с «холодным стартом» GPS-модуля, когда устройству требуется 10–30 секунд для синхронизации со спутниками. В этот период навигатор отображает круг вместо точечного маркера, сигнализируя о нестабильности данных. В Yandex Maps и 2GIS аналогичный эффект наблюдается при переключении между режимами «Спутник» и «Схема», если геолокация не успевает обновиться.
- Потеря сигнала в туннелях или подземных парковках. В таких зонах GPS отключается, и навигатор переходит на данные акселерометра и гироскопа, которые не обеспечивают точности. Круглый курсор здесь указывает на экстраполированное местоположение с погрешностью до нескольких сотен метров.
- Использование VPN или прокси. Если IP-адрес пользователя не совпадает с реальным местоположением, картографические сервисы могут показывать круглый курсор вместо точной точки. Это характерно для корпоративных сетей или при подключении через зарубежные серверы.
- Ограничения доступа к геолокации. В браузерах (например, Chrome или Safari) при отказе в доступе к местоположению или выборе опции «Приблизительно» вместо «Точно» курсор отображается в виде круга с радиусом до 1–2 км.
В автомобильных навигаторах (Garmin, Navitel) круглый курсор может появляться при движении в плотном городском трафике или среди высотных зданий. Многолучевые отражения сигнала от спутников создают эффект «городского каньона», увеличивая погрешность до 30–50 метров. В таких случаях навигаторы автоматически переключаются на режим «неопределённого местоположения», пока сигнал не стабилизируется. Пользователям рекомендуется снизить скорость или остановиться для повторной калибровки GPS.
В веб-приложениях (например, карты OpenStreetMap или Leaflet) круглый курсор возникает при использовании API геолокации с параметром enableHighAccuracy: false. Это экономит заряд батареи, но снижает точность до 1–3 км. Разработчики могут принудительно задать радиус круга через метод watchPosition(), указав минимальное значение погрешности в метрах. Для тестирования таких сценариев в Chrome DevTools предусмотрен режим эмуляции геолокации с настраиваемой точностью.
Круглый курсор также служит индикатором режима редактирования в картографических сервисах. В Google My Maps или Mapbox при добавлении новой точки на карту система сначала отображает круг, предлагая пользователю уточнить местоположение вручную. Радиус круга здесь зависит от масштаба карты: на уровне города он может составлять 500 метров, а при максимальном увеличении – всего 5 метров. В профессиональных ГИС-системах (QGIS, ArcGIS) аналогичный механизм используется для визуализации буферных зон вокруг объектов.
Как ускорить исчезновение круглого курсора при работе с навигатором
Очистка кэша браузера или приложения устраняет конфликты с устаревшими данными, которые могут замедлять обработку запросов. В Chrome или Firefox выполните очистку через «Настройки» → «Конфиденциальность и безопасность» → «Очистить историю», выбрав «Кэшированные изображения и файлы». В мобильных приложениях удалите кэш через настройки устройства или переустановите приложение, если проблема сохраняется.
Отключите ненужные расширения браузера, особенно блокировщики рекламы и VPN, так как они увеличивают нагрузку на процессор и замедляют загрузку картографических данных. В Chrome проверьте список расширений через chrome://extensions и временно деактивируйте их. Для Яндекс.Браузера аналогичная настройка доступна в разделе «Дополнения».
Обновите драйверы видеокарты и браузер до последней версии. Устаревшие драйверы могут вызывать задержки при рендеринге графики. Для Windows обновите драйверы через «Диспетчер устройств» или скачайте их с сайта производителя (NVIDIA, AMD, Intel). В браузерах включите аппаратное ускорение: в Chrome – через chrome://settings/system, в Firefox – about:preferences#general.
Если курсор долго не исчезает при работе с API навигатора (например, Leaflet или Mapbox), проверьте код на наличие лишних запросов к серверу. Оптимизируйте вызовы функций, используя debounce для событий типа drag или zoom, чтобы снизить частоту обращений. Пример для Leaflet: map.on('moveend', debounce(updateMarkers, 300));, где debounce – функция задержки выполнения.
Какие действия пользователя вызывают появление круга вместо стрелки
Второй распространённый случай – загрузка контента. При наведении на зоны, предназначенные для drag-and-drop загрузки файлов (например, облачные хранилища или почтовые клиенты), курсор трансформируется в круг с плюсом. Это сигнал о том, что система готова принять файл. Если пользователь отпустит кнопку мыши вне допустимой области, курсор вернётся к стрелке, а действие не выполнится.
Круг также возникает при работе с интерактивными картами или графиками, где реализовано перемещение вида. Например, в Google Maps при удержании левой кнопки мыши курсор меняется на круг с четырьмя стрелками, указывая на возможность панорамирования. Аналогично ведут себя графики в аналитических инструментах, где пользователь может перетаскивать область масштабирования.
В текстовых редакторах и IDE круг появляется при выделении текста с последующим перетаскиванием. Если зажать левую кнопку мыши над выделенным фрагментом и начать движение, курсор сменится на круг с прямоугольником – это означает, что текст можно переместить в новое место. В некоторых редакторах (например, VS Code) круг дополняется значком «+», если при перетаскивании удерживать клавишу Ctrl для копирования.
В играх и симуляторах круг часто обозначает режим перемещения камеры или объекта. Например, в стратегиях при нажатии средней кнопки мыши курсор превращается в круг с крестообразными стрелками, позволяя вращать камеру. В 3D-редакторах аналогичный курсор сигнализирует о возможности перемещения сцены или модели без изменения её ориентации.
Наконец, круг может появляться при ошибках взаимодействия. Если JavaScript-обработчик события drag не завершился корректно, браузер может «зависнуть» в режиме перетаскивания, отображая круг даже после отпускания кнопки мыши. В таких случаях помогает обновление страницы или перезапуск браузера – курсор вернётся к стандартному виду только после сброса состояния.
Как настроить отображение курсоров в браузере или приложении

Курсоры в браузерах и приложениях управляются через CSS-свойство cursor, которое поддерживает более 30 значений. По умолчанию используется auto, но для кастомизации доступны варианты: pointer (рука), grab (захват), wait (ожидание), crosshair (прицел) и другие. Чтобы изменить курсор на всей странице, добавьте в CSS:
body { cursor: pointer; }– заменит стандартный курсор на руку при наведении на любые элементы.a:hover { cursor: help; }– сменит курсор на знак вопроса при наведении на ссылки.
В десктопных приложениях на основе Electron или Qt настройка курсоров зависит от фреймворка. Например, в Electron используйте webContents.setIgnoreMenuShortcuts(true) для отключения системных курсоров или переопределяйте их через CSS, как в браузере. В Qt применяйте метод QApplication::setOverrideCursor() для временной замены курсора, например:
QApplication::setOverrideCursor(Qt::WaitCursor);– покажет крутящийся круг ожидания.QApplication::restoreOverrideCursor();– вернёт стандартный курсор.
Для кастомных курсоров загрузите изображение в формате .cur или .png (рекомендуемый размер – 32×32 пикселя) и укажите путь в CSS:
body { cursor: url('custom.cur'), auto; }– основной курсор.button:hover { cursor: url('pointer.png'), pointer; }– курсор при наведении на кнопку.
Поддерживаются форматы .cur (статичные курсоры) и .ani (анимированные), но анимация работает не во всех браузерах (например, Chrome игнорирует .ani). Для кроссбраузерности используйте PNG с fallback на стандартные значения.
В мобильных браузерах и PWA настройка курсоров ограничена. iOS Safari игнорирует большинство кастомных курсоров, кроме pointer и default. Android поддерживает только базовые значения. Для тестирования используйте инструменты разработчика в Chrome: откройте DevTools (F12) → Elements → выберите элемент → в панели Styles найдите cursor и меняйте значения в реальном времени.
В играх на JavaScript (например, с использованием Phaser или Three.js) курсоры настраиваются через document.body.style.cursor или API движка. В Phaser 3:
this.input.setDefaultCursor('url(assets/cursor.png), pointer');– задаёт кастомный курсор для всей сцены.this.input.setCursor('wait');– временно меняет курсор на ожидание.
Для отключения курсора в играх используйте document.body.style.cursor = 'none';, но учтите, что это может ухудшить UX на десктопах.
В Windows-приложениях на C# с WPF курсоры настраиваются через свойство Cursor элементов. Пример:
Button.Cursor = Cursors.Hand;– рука при наведении на кнопку.Window.Cursor = Cursors.Wait;– курсор ожидания для всего окна.
Для кастомных курсоров загрузите файл .cur в проект и укажите путь: Button.Cursor = new Cursor("path/to/custom.cur");. В UWP используйте CoreCursor с идентификатором типа CoreCursorType.Custom и передавайте ID ресурса.
Что делать, если круглый курсор не исчезает длительное время
Круглый курсор навигатора (индикатор загрузки или ожидания) обычно сигнализирует о выполнении системой фоновых операций. Если он не исчезает дольше 30–60 секунд, проблема может крыться в зависшем процессе, конфликте программ или аппаратных ограничениях. Первым шагом проверьте диспетчер задач: нажмите Ctrl + Shift + Esc, отсортируйте процессы по использованию ЦП и памяти, завершите подозрительные приложения с высокой нагрузкой.
Если курсор зависает при работе с браузером, очистите кэш и временные файлы. В Chrome или Edge выполните Ctrl + Shift + Del, выберите «Файлы cookie и другие данные сайтов» и «Кэшированные изображения и файлы», затем подтвердите удаление. Для Firefox используйте about:preferences#privacy и раздел «История». После очистки перезапустите браузер.
- Проверьте обновления драйверов видеокарты. Зайдите в «Диспетчер устройств» (
Win + X), разверните «Видеоадаптеры», щелкните правой кнопкой по своей GPU и выберите «Обновить драйвер». Если обновление не помогло, попробуйте откатить драйвер до предыдущей версии через «Свойства» → «Драйвер» → «Откатить». - Отключите аппаратное ускорение в приложениях. В браузерах:
Настройки → Система → Использовать аппаратное ускорение (отключить). В играх или графических редакторах ищите аналогичный параметр в настройках производительности. - Запустите проверку системных файлов. В командной строке от имени администратора выполните
sfc /scannowи дождитесь завершения сканирования. Если ошибки найдены, перезагрузите компьютер.
Круглый курсор может появляться из-за нехватки оперативной памяти. Откройте диспетчер задач (Ctrl + Shift + Esc), перейдите на вкладку «Производительность» и проверьте загрузку ОЗУ. Если память занята на 90% и выше, закройте ненужные программы или увеличьте файл подкачки: Панель управления → Система → Дополнительные параметры системы → Быстродействие → Дополнительно → Виртуальная память → Изменить. Установите размер файла подкачки в 1,5–2 раза больше объема ОЗУ.
Проблема может быть связана с конфликтующими расширениями браузера. Откройте режим инкогнито (Ctrl + Shift + N) и проверьте, исчезает ли курсор. Если да, поочередно отключайте расширения через chrome://extensions или about:addons (Firefox), перезагружая браузер после каждого изменения. Особое внимание уделите блокировщикам рекламы, VPN и менеджерам паролей.
Если курсор зависает при работе с конкретным приложением, переустановите его. Удалите программу через «Параметры» → «Приложения» → «Установленные приложения», затем скачайте последнюю версию с официального сайта. Для старых программ используйте режим совместимости: правый клик по ярлыку → «Свойства» → «Совместимость» → выберите Windows 8 или 7.
- Проверьте жесткий диск на ошибки. В командной строке выполните
chkdsk C: /f /r(заменитеC:на букву нужного диска). Система предложит выполнить проверку при следующей перезагрузке – подтвердите и дождитесь завершения. - Отключите ненужные службы автозагрузки. Нажмите
Win + R, введитеmsconfig, перейдите на вкладку «Службы», установите флажок «Не отображать службы Microsoft» и отключите подозрительные элементы. Перезагрузите компьютер. - Сбросьте настройки BIOS. При загрузке системы нажмите
DelилиF2(зависит от материнской платы), найдите опцию «Load Optimized Defaults» и подтвердите сброс. Сохраните изменения и перезагрузитесь.
В редких случаях проблема вызвана повреждением системных файлов Windows. Запустите средство восстановления: Параметры → Обновление и безопасность → Восстановление → Особые варианты загрузки → Перезагрузить сейчас. После перезагрузки выберите «Поиск и устранение неисправностей» → «Дополнительные параметры» → «Восстановление системы» и следуйте инструкциям. Если это не поможет, рассмотрите переустановку ОС с сохранением личных файлов.
