Главная
Проекты на Vue
Элегантная загрузка с размытием

Элегантная загрузка с размытием

Создание динамических и визуально приятных индикаторов загрузки может потребовать немало усилий. Однако с фреймворком Vue.js эта задача становится невероятно простой. Реактивная природа Vue позволяет легко связывать данные со стилями, создавая плавные и сложные анимации, такие как это исчезающее размытие, буквально в несколько строк кода.

Посмотрите, как это работает: по мере загрузки изображение становится четче, а счетчик плавно исчезает.

Если хотите посмотреть эффект еще раз — перезагрузите страницу.

{{loading}}%

<div id="app">
  <div class="app-counter-container">
    <div class="app-counter-img" :style="{filter: `blur(${updateBlur()}px)`}"></div>
    <div class="app-counter" :style="{opacity: updateOpacity()}">{{loading}}%</div>
  </div>
</div>

#app {
  width: 100%;  
}
.app-counter-container {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 70vh;
}
.app-counter-img {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url(image.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.app-counter {
  font-size: 48px;
  font-weight: 500;
}

const {createApp, ref, onMounted} = Vue
createApp({
    setup(){
        const steps = 100
        const step = 50
        const blur = 20
        let loading = ref(0)
        const ratio = () => {return steps / blur }
        function updateOpacity() {
            let opacity = ((steps - loading.value) * .01).toFixed(1)
            return opacity
        }
        function updateBlur() {			
            return blur - loading.value / ratio()
        }
        onMounted(()=>{
            let timerId = setInterval(() => {
                loading.value++
                if (loading.value === steps) {
                    clearInterval(timerId)
                }
            }, step)
        })
        return{loading, updateOpacity, updateBlur}
    }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как это работает: разбираем код

Выше представлен код, который приводит в действие анимацию загрузки с размытием. Он наглядно демонстрирует мощь и элегантность Vue.js.

HTML

Это каркас нашего компонента. Мы создаем контейнер для фонового изображения и счетчика. Обратите внимание на директивы :style, которые динамически вычисляют размытие и прозрачность на основе реактивных данных Vue.

CSS

Задает стили и позиционирование. Фоновое изображение растягивается на весь контейнер, а счетчик центрируется поверх него с помощью position: relative и position: absolute.

JavaScript (Vue 3 Composition API)

Это «мозг» компонента. Логика работы проста:

Мы используем реактивную переменную loading, которая хранит текущий прогресс (от 0 до 100).
Функции updateBlur() и updateOpacity() динамически вычисляют значения для CSS-свойств filter: blur() и opacity на основе прогресса загрузки.
Хук onMounted запускает таймер, который увеличивает значение loading, имитируя процесс загрузки. Когда прогресс достигает 100%, таймер очищается.

Готовы создать нечто особенное для вашего проекта?

Понравился этот эффект? Это лишь маленький пример того, как современные технологии, такие как Vue.js, могут оживить ваш сайт и улучшить пользовательский опыт. Наша веб-студия готова разработать для вас не только красивые индикаторы загрузки, но и сложные интерактивные интерфейсы, которые будут радовать ваших клиентов.

Свяжитесь с нами, и мы воплотим ваши идеи в чистый и эффективный код!

Предыдущий Следующий