alfaitstudio
Услуги
  • Интерактивная видеостудия
    • Съёмка в видеостудии с прозрачной доской
    • Проведение онлайн-трансляций и вебинаров
    • Съёмка видео для соцсетей
    • Съёмка видео обзоров/распаковок/анпакингов
    • Съёмка онлайн-курсов
    • Съёмка поздравлений
  • Разработка сайтов на CMS
    • Создание сайтов
    • Создание интернет-магазинов
    • Создание маркетплейсов
    • Создание лэндингов/посадочных страниц
  • Продвижение и реклама
    • Поисковое продвижение и оптимизация
    • Настройка и ведение контекстной и таргетированной рекламы
    • Продвижение в социальных сетях
    • SEO аудит сайта
    • Продвижение интернет магазина
    • Продвижение промышленных и производственных предприятий
  • Графика и дизайн
    • UX/UI дизайн сайтов и приложений
    • Создание 3D моделей
    • Разработка фирменного стиля
    • Создание логотипа
  • 1C - установка и оптимизация
    • Установка и оптимизация 1С сервера
    • Устранение ошибок 1С
    • Создание и настройка обмена данными между 1С и 1С Битрикс
  • Разработка мобильных приложений
    • Разработка приложений для iOS и Android
  • Видеопродакшн
    • Съёмка видеоподкастов
    • Рекламные видеоролики
Пресс-центр
Проекты
  • Дизайн
Команда
Компания
  • О компании
  • Команда
  • Сертификаты
  • Реквизиты
  • Пользовательское соглашение
  • Политика обработки персональных данных
  • Публичный договор-оферта
  • Правила работы в студии
  • Как оставить отзыв
Контакты
Ещё
    Задать вопрос
    Мой кабинет
    Корзина0
    +7 (800) 555-26-23
    Заказать звонок
    88005552623@mail.ru
    Тюмень, ул. Ленина 2а, ТРЦ Панорама, 6 этаж 603 офис
    • Вконтакте
    • Telegram
    • YouTube
    • Одноклассники
    • Whats App
    • Viber
    0
    +7 (800) 555-26-23
    Заказать звонок
    alfaitstudio
    Услуги
    • Интерактивная видеостудия
      Интерактивная видеостудия
      • Съёмка в видеостудии с прозрачной доской
      • Проведение онлайн-трансляций и вебинаров
      • Съёмка видео для соцсетей
      • Съёмка видео обзоров/распаковок/анпакингов
      • Съёмка онлайн-курсов
      • Съёмка поздравлений
    • Разработка сайтов на CMS
      Разработка сайтов на CMS
      • Создание сайтов
      • Создание интернет-магазинов
      • Создание маркетплейсов
      • Создание лэндингов/посадочных страниц
    • Продвижение и реклама
      Продвижение и реклама
      • Поисковое продвижение и оптимизация
      • Настройка и ведение контекстной и таргетированной рекламы
      • Продвижение в социальных сетях
      • SEO аудит сайта
      • Продвижение интернет магазина
      • Продвижение промышленных и производственных предприятий
    • Графика и дизайн
      Графика и дизайн
      • UX/UI дизайн сайтов и приложений
      • Создание 3D моделей
      • Разработка фирменного стиля
      • Создание логотипа
    • 1C - установка и оптимизация
      1C - установка и оптимизация
      • Установка и оптимизация 1С сервера
      • Устранение ошибок 1С
      • Создание и настройка обмена данными между 1С и 1С Битрикс
    • Разработка мобильных приложений
      Разработка мобильных приложений
      • Разработка приложений для iOS и Android
    • Видеопродакшн
      Видеопродакшн
      • Съёмка видеоподкастов
      • Рекламные видеоролики
    Пресс-центр
    Проекты
    • Дизайн
    Команда
    Компания
    • О компании
    • Команда
    • Сертификаты
    • Реквизиты
    • Пользовательское соглашение
    • Политика обработки персональных данных
    • Публичный договор-оферта
    • Правила работы в студии
    • Как оставить отзыв
    Контакты

      Видеостудия

      Разработка сайтов

      Дизайн и графика

      1С - установка и оптимизация

      Реклама и продвижение

      alfaitstudio
      Услуги
      • Интерактивная видеостудия
        Интерактивная видеостудия
        • Съёмка в видеостудии с прозрачной доской
        • Проведение онлайн-трансляций и вебинаров
        • Съёмка видео для соцсетей
        • Съёмка видео обзоров/распаковок/анпакингов
        • Съёмка онлайн-курсов
        • Съёмка поздравлений
      • Разработка сайтов на CMS
        Разработка сайтов на CMS
        • Создание сайтов
        • Создание интернет-магазинов
        • Создание маркетплейсов
        • Создание лэндингов/посадочных страниц
      • Продвижение и реклама
        Продвижение и реклама
        • Поисковое продвижение и оптимизация
        • Настройка и ведение контекстной и таргетированной рекламы
        • Продвижение в социальных сетях
        • SEO аудит сайта
        • Продвижение интернет магазина
        • Продвижение промышленных и производственных предприятий
      • Графика и дизайн
        Графика и дизайн
        • UX/UI дизайн сайтов и приложений
        • Создание 3D моделей
        • Разработка фирменного стиля
        • Создание логотипа
      • 1C - установка и оптимизация
        1C - установка и оптимизация
        • Установка и оптимизация 1С сервера
        • Устранение ошибок 1С
        • Создание и настройка обмена данными между 1С и 1С Битрикс
      • Разработка мобильных приложений
        Разработка мобильных приложений
        • Разработка приложений для iOS и Android
      • Видеопродакшн
        Видеопродакшн
        • Съёмка видеоподкастов
        • Рекламные видеоролики
      Пресс-центр
      Проекты
      • Дизайн
      Команда
      Компания
      • О компании
      • Команда
      • Сертификаты
      • Реквизиты
      • Пользовательское соглашение
      • Политика обработки персональных данных
      • Публичный договор-оферта
      • Правила работы в студии
      • Как оставить отзыв
      Контакты
        0
        alfaitstudio
        0
        • Мой кабинет
        • Услуги
          • Назад
          • Услуги
          • Интерактивная видеостудия
            • Назад
            • Интерактивная видеостудия
            • Съёмка в видеостудии с прозрачной доской
            • Проведение онлайн-трансляций и вебинаров
            • Съёмка видео для соцсетей
            • Съёмка видео обзоров/распаковок/анпакингов
            • Съёмка онлайн-курсов
            • Съёмка поздравлений
          • Разработка сайтов на CMS
            • Назад
            • Разработка сайтов на CMS
            • Создание сайтов
            • Создание интернет-магазинов
            • Создание маркетплейсов
            • Создание лэндингов/посадочных страниц
          • Продвижение и реклама
            • Назад
            • Продвижение и реклама
            • Поисковое продвижение и оптимизация
            • Настройка и ведение контекстной и таргетированной рекламы
            • Продвижение в социальных сетях
            • SEO аудит сайта
            • Продвижение интернет магазина
            • Продвижение промышленных и производственных предприятий
          • Графика и дизайн
            • Назад
            • Графика и дизайн
            • UX/UI дизайн сайтов и приложений
            • Создание 3D моделей
            • Разработка фирменного стиля
            • Создание логотипа
          • 1C - установка и оптимизация
            • Назад
            • 1C - установка и оптимизация
            • Установка и оптимизация 1С сервера
            • Устранение ошибок 1С
            • Создание и настройка обмена данными между 1С и 1С Битрикс
          • Разработка мобильных приложений
            • Назад
            • Разработка мобильных приложений
            • Разработка приложений для iOS и Android
          • Видеопродакшн
            • Назад
            • Видеопродакшн
            • Съёмка видеоподкастов
            • Рекламные видеоролики
        • Пресс-центр
        • Проекты
          • Назад
          • Проекты
          • Дизайн
        • Команда
        • Компания
          • Назад
          • Компания
          • О компании
          • Команда
          • Сертификаты
          • Реквизиты
          • Пользовательское соглашение
          • Политика обработки персональных данных
          • Публичный договор-оферта
          • Правила работы в студии
          • Как оставить отзыв
        • Контакты
        • Корзина0
        • +7 (800) 555-26-23
        88005552623@mail.ru
        Тюмень, ул. Ленина 2а, ТРЦ Панорама, 6 этаж 603 офис
        • Вконтакте
        • Telegram
        • YouTube
        • Одноклассники
        • Whats App
        • Viber
        • Главная
        • Пресс-центр
        • Блог
        • Как создать скелетный экран загрузки сайта

        Как создать скелетный экран загрузки сайта

        10 августа 2022
        Блог

        Иногда сайт или приложение загружаются с такой скоростью, что белый экран монитора и “вечное” ожидание прогрузки способны вывести из состояния равновесия кого угодно.

        Причин у этого может быть множество, но основные две:

        • неоптимизированное содержимое страницы;
        • медленная скорость соединения у пользователя.
        скелетная загрузка превью.jpg

        Чтобы не вызывать у посетителя негативные эмоции о ресурсе, дизайнеры и разработчики пошли на ухищрение - создали скелетный экран загрузки.

        Скелетная загрузка - это появление на экране плейсхолдеров нейтрального цвета, чаще всего светло-серого, на месте которого, по завершению загрузки появится контент.

        По данным исследования продуктового дизайнера компании "Clio" Билла Чанга, скелетная загрузка используется, чтобы дать понять пользователю, что страница загружается. В сравнении с пустым экраном и спиннером она создаёт иллюзию более быстрой загрузки страниц.

        Как создать скелетный экран загрузки

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

        .skeleton { 
        position: relative; 
        cursor: default; 
        }
        
        .skeleton::after { 
        background-image: linear-gradient( 90deg, #EEEEEE 0%, #EEEEEE 40%, #DDDDDD 50%, #DDDDDD 55%, #EEEEEE 65%, #EEEEEE 100% ); 
        background-size: 400%; 
        animation: skeleton 1500ms infinite; 
        content: ''; 
        z-index: 2; 
        width: 100%; 
        height: 100%; 
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        border-radius: 5px; 
        }
        
        @keyframes skeleton { 
        from {background-position: 100% 100%;} 
        to {background-position: 0 0;} 
        }

        Если использовать только CSS, то анимация загрузки страницы будет бесконечно повторяться, поэтому нам нужен JS файл для удаления стиля skeleton.

        На моей тестовой странице он выглядит следующим образом:

        const skeletons = document.querySelectorAll('.skeleton') 
        skeletons.forEach((skeleton) => { 
        setTimeout(() => { 
        $(skeletons).removeClass('skeleton')
         }, 4000) 
        })
        

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

        Финальный результат выглядит следующим образом:

        image2.gif

        Скелетная загрузка - это не сложный в создании, но эффективный приём улучшения восприятия вашего ресурса пользователями. Обязательно попробуйте его и делитесь своими показателями в комментариях.

        Файл с примером вы можете скачать - тут.

        Подписаться на
        рассылку

        Будьте в курсе последних новостей отрасли

        Подписаться
        • Комментарии
        Загрузка комментариев...
        Назад к списку
        Услуги
        Интерактивная видеостудия
        Разработка сайтов на CMS
        Продвижение и реклама
        Графика и дизайн
        1C - установка и оптимизация
        Разработка мобильных приложений
        Видеопродакшн
        Продукция
        Компания
        О компании
        Команда
        Сертификаты
        Реквизиты
        Пользовательское соглашение
        Политика обработки персональных данных
        Публичный договор-оферта
        Правила работы в студии
        Как оставить отзыв
        Проекты
        Пресс-центр
        Контакты
        Подписка на рассылку
        +7 (800) 555-26-23
        Заказать звонок
        88005552623@mail.ru
        Тюмень, ул. Ленина 2а, ТРЦ Панорама, 6 этаж 603 офис
        • Вконтакте
        • Telegram
        • YouTube
        • Одноклассники
        • Whats App
        • Viber
        Версия для печати
        Политика конфиденциальности
        © 2023
        0

        Ваша корзина пуста

        Исправить это просто: выберите в каталоге интересующий товар и нажмите кнопку «В корзину»
        В каталог
        Заказать звонок
        Написать сообщение
        Оставить отзыв
        Ближайший офис