SM - Стильные решения для вашего сайта

Пивная загрузка: Beer Bottle Preloader, который поднимет настроение

Beer Bottle Preloader: уникальный CSS виджет загрузки

Beer Bottle Preloader: уникальный CSS виджет загрузки

Ищете способ добавить оригинальности и юмора вашему проекту?
Виджет Beer Bottle Preloader — это необычное и стильное решение для экрана загрузки, созданное с использованием только CSS. 

Этот креативный прелоадер изображает бутылки пива, которые заполняются по мере завершения загрузки страницы, создавая эффектный и запоминающийся пользовательский опыт.

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

Простой и легкий для внедрения код позволяет настроить прелоадер под ваши нужды, например, изменить скорость загрузки, цвета или добавить дополнительные элементы анимации.

Это отличный способ добавить вашему сайту изюминку!

See the Pen Beer Bottle Preloader by Jon Kantner (@jkantner) on CodePen.

        
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Beer Bottle Preloader</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
 
</head>
<body>
<!-- partial:index.partial.html -->
<svg class="pl" viewBox="0 0 128 82" width="128px" height="82px">
<symbol id="pl-bottle">
<path d="m16.493,26.641c-.494-1.023-1.282-2.025-1.579-2.402-.037-.047-.064-.081-.079-.101-.008-.011-.02-.027-.036-.048-.431-.566-1.154-1.761-1.154-3.399,0-2.129-.174-6.086-.456-8.768-.118-1.127-.233-2.248-.325-3.149-.089-.867-.139-1.359-.171-1.646.192-.24.345-.489.345-.786,0-.144-.04-.358-.266-1.426-.021-.1-.045-.211-.068-.321.093-.066.171-.152.225-.251.177-.325.186-1.539-.115-2.16-.353-.73-1.14-1.184-2.054-1.184h-3.521c-.915,0-1.702.454-2.055,1.184-.302.624-.29,1.838-.112,2.162.054.098.131.183.223.249-.023.108-.046.216-.066.315-.228,1.074-.268,1.289-.268,1.434,0,.299.153.547.346.787-.029.267-.075.712-.153,1.472-.095.928-.218,2.121-.343,3.322-.281,2.693-.456,6.648-.456,8.768,0,1.638-.723,2.832-1.153,3.399-.016.021-.028.037-.036.048-.014.019-.041.053-.078.101-.297.377-1.085,1.379-1.579,2.401-.582,1.204-.512,2.868-.499,3.1.002.737.05,20.319.051,21.504-.072,2.848.333,4.272,1.399,4.911,1.262.783,5.324.844,6.541.844s5.28-.061,6.541-.845c1.066-.639,1.471-2.064,1.398-4.911,0-1.238.05-20.764.052-21.503.013-.233.084-1.897-.498-3.1Z" />
</symbol>
<symbol id="pl-liquid">
<path d="m48,56H0V0c3.926,0,4.265,1,8,1,2.016,0,4.44-1,8-1,3.465,0,5.124,1,8,1,3.766,0,4.491-1,8-1,3.601,0,4.706,1,8,1,3.731,0,4.303-1,8-1v56Z" transform="translate(0,2)" />
</symbol>
<defs>
<clipPath id="pl-bottle-clip">
<path d="m16.493,26.641c-.494-1.023-1.282-2.025-1.579-2.402-.037-.047-.064-.081-.079-.101-.008-.011-.02-.027-.036-.048-.431-.566-1.154-1.761-1.154-3.399,0-2.129-.174-6.086-.456-8.768-.118-1.127-.233-2.248-.325-3.149-.089-.867-.139-1.359-.171-1.646.192-.24.345-.489.345-.786,0-.144-.04-.358-.266-1.426-.021-.1-.045-.211-.068-.321.093-.066.171-.152.225-.251.177-.325.186-1.539-.115-2.16-.353-.73-1.14-1.184-2.054-1.184h-3.521c-.915,0-1.702.454-2.055,1.184-.302.624-.29,1.838-.112,2.162.054.098.131.183.223.249-.023.108-.046.216-.066.315-.228,1.074-.268,1.289-.268,1.434,0,.299.153.547.346.787-.029.267-.075.712-.153,1.472-.095.928-.218,2.121-.343,3.322-.281,2.693-.456,6.648-.456,8.768,0,1.638-.723,2.832-1.153,3.399-.016.021-.028.037-.036.048-.014.019-.041.053-.078.101-.297.377-1.085,1.379-1.579,2.401-.582,1.204-.512,2.868-.499,3.1.002.737.05,20.319.051,21.504-.072,2.848.333,4.272,1.399,4.911,1.262.783,5.324.844,6.541.844s5.28-.061,6.541-.845c1.066-.639,1.471-2.064,1.398-4.911,0-1.238.05-20.764.052-21.503.013-.233.084-1.897-.498-3.1Z" />
</clipPath>
</defs>
<g class="pl__bottles" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(0,24)">
<line class="pl__rod" x1="64" y1="-56" x2="64" y2="-24" />
<g class="pl__bottle pl__bottle--in">
<g transform="translate(-1,0)">
<g clip-path="url(#pl-bottle-clip)">
<use class="pl__fill pl__fill--half" href="#pl-liquid" transform="translate(0,56)" />
</g>
<use class="pl__bottle-glass" href="#pl-bottle" />
<g class="pl__bottle-glare">
<line x1="10" y1="9" x2="10.5" y2="21" />
<line x1="13" y1="30" x2="13" y2="52" />
</g>
</g>
<rect class="pl__cap" x="3" y="-23" rx="2" ry="2" width="10" height="4" />
</g>
<g class="pl__bottle" transform="translate(28,0)">
<g transform="translate(-1,0)">
<g clip-path="url(#pl-bottle-clip)">
<use class="pl__fill pl__fill--full" href="#pl-liquid" transform="translate(0,32)" />
</g>
<use class="pl__bottle-glass" href="#pl-bottle" />
<g class="pl__bottle-glare">
<line x1="10" y1="9" x2="10.5" y2="21" />
<line x1="13" y1="30" x2="13" y2="52" />
</g>
</g>
<rect class="pl__cap" x="3" y="-23" rx="2" ry="2" width="10" height="4" />
</g>
<g class="pl__bottle pl__bottle--bounce" transform="translate(56,0)">
<g transform="translate(-1,0)">
<g clip-path="url(#pl-bottle-clip)">
<use class="pl__fill pl__fill--startle1" href="#pl-liquid" transform="translate(0,8)" />
</g>
<use class="pl__bottle-glass" href="#pl-bottle" />
<g class="pl__bottle-glare">
<line x1="10" y1="9" x2="10.5" y2="21" />
<line x1="13" y1="30" x2="13" y2="52" />
</g>
</g>
<rect class="pl__cap pl__cap--on" x="3" y="-23" rx="2" ry="2" width="10" height="4" />
</g>
<g class="pl__bottle pl__bottle--out" transform="translate(84,0)">
<g transform="translate(-1,0)">
<g clip-path="url(#pl-bottle-clip)">
<use class="pl__fill pl__fill--startle2" href="#pl-liquid" transform="translate(0,8)" />
</g>
<use class="pl__bottle-glass" href="#pl-bottle" />
<g class="pl__bottle-glare">
<line x1="10" y1="9" x2="10.5" y2="21" />
<line x1="13" y1="30" x2="13" y2="52" />
</g>
</g>
<rect class="pl__cap" x="3" y="0" rx="2" ry="2" width="10" height="4" />
</g>
<g class="pl__bottle" transform="translate(112,0)">
<g transform="translate(-1,0)">
<g clip-path="url(#pl-bottle-clip)">
<use class="pl__fill" href="#pl-liquid" transform="translate(0,8)" />
</g>
<use class="pl__bottle-glass" href="#pl-bottle" />
<g class="pl__bottle-glare">
<line x1="10" y1="9" x2="10.5" y2="21" />
<line x1="13" y1="30" x2="13" y2="52" />
</g>
</g>
<rect class="pl__cap" x="3" y="0" rx="2" ry="2" width="10" height="4" />
</g>
</g>
</svg>
<!-- partial -->
  
</body>
</html>
        
CSS
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,80%);
--fg: hsl(var(--hue),10%,10%);
--trans-dur: 0.3s;
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
font: 1em/1.5 sans-serif;
height: 100vh;
transition:
background-color var(--trans-dur),
color var(--trans-dur);
}
.pl {
display: block;
margin: auto;
width: 16em;
height: auto;
}
.pl__bottles,
.pl__bottle--bounce,
.pl__bottle--in,
.pl__bottle--out,
.pl__cap--on,
.pl__fill--full,
.pl__fill--half,
.pl__fill--startle1,
.pl__fill--startle2,
.pl__rod {
animation: move-right 0.6s linear infinite;
}
.pl__bottle {
transform-origin: 8px 56px;
}
.pl__bottle--bounce {
animation-name: bounce;
}
.pl__bottle--in,
.pl__bottle--out {
animation-name: fade-in;
}
.pl__bottle--in {
opacity: 0;
}
.pl__bottle--out {
animation-direction: reverse;
}
.pl__bottle--out ~ .pl__bottle {
opacity: 0;
}
.pl__bottle-glass,
.pl__cap,
.pl__rod {
stroke: hsl(var(--hue),10%,30%);
}
.pl__bottle-glass {
fill: hsla(var(--hue),10%,30%,0.05);
transition:
fill var(--trans-dur),
stroke var(--trans-dur);
}
.pl__bottle-glare {
stroke: hsl(0,0%,100%);
}
.pl__cap,
.pl__rod {
transition: stroke var(--trans-dur);
}
.pl__cap {
fill: hsl(0,0%,100%);
}
.pl__cap--on {
animation-name: cap-on;
animation-timing-function: ease-in;
}
.pl__fill {
fill: hsla(43,90%,50%,0.8);
stroke: hsl(43,90%,95%);
stroke-width: 4px;
}
.pl__fill--full {
animation-name: fill-up-full;
}
.pl__fill--half {
animation-name: fill-up-half;
}
.pl__fill--startle1 {
animation-name: fill-startle1;
}
.pl__fill--startle2 {
animation-name: fill-startle2;
}
.pl__rod {
animation-name: down-up;
}
 
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,20%);
--fg: hsl(var(--hue),10%,90%);
}
.pl__bottle-glass,
.pl__cap,
.pl__rod {
stroke: hsl(var(--hue),10%,50%);
}
.pl__bottle-glass {
fill: hsla(var(--hue),10%,50%,0.05);
}
}
/* Animations */
@keyframes bounce {
from,
50%,
to {
animation-timing-function: ease-out;
transform: translate(56px,0) scale(1,1);
}
66.7% {
animation-timing-function: ease-in;
transform: translate(56px,0) scale(1.1,0.9);
}
83.3% {
animation-timing-function: ease-out;
transform: translate(56px,0) scale(0.95,1.05);
}
}
@keyframes cap-on {
from { transform: translate(0,0); }
50%,
to { transform: translate(0,23px); }
}
@keyframes fill-startle1 {
from { transform: translate(0,8px); }
to { transform: translate(-20px,8px); }
}
@keyframes fill-startle2 {
from { transform: translate(-20px,8px); }
25% { transform: translate(-30px,8px); }
to { transform: translate(0,8px); }
}
@keyframes fill-up-half {
from { transform: translate(-30px,56px); }
to { transform: translate(-15px,32px); }
}
@keyframes fill-up-full {
from { transform: translate(-15px,32px); }
to { transform: translate(0,8px); }
}
@keyframes move-right {
from { transform: translate(0,24px); }
to { transform: translate(28px,24px); }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes down-up {
from,
to {
animation-timing-function: ease-in;
transform: translate(0,0);
}
50% {
animation-timing-function: ease-out;
transform: translate(0,24px);
}
66.7% {
animation-timing-function: ease-in;
transform: translate(0,31px);
}
}

beer-bottle-preloader.zip
0 19.72 Kb
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 0 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU