Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Sep 2, 2016

Embed
What would you like to do?
wineshop loader
<div class="loader">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div class="wineglass left">
<div class="top"></div>
</div>
<div class="wineglass right">
<div class="top"></div>
</div>
</div>
*:before, *:after {
content: '';
position: absolute;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #C4D9EB;
}
.wineglass {
height: 36px;
position: relative;
}
.wineglass:after {
top: 47px;
left: 5px;
width: 20px;
height: 5px;
background: white;
box-shadow: 0 0 1px white;
}
.top {
background: white;
width: 30px;
height: 36px;
border-radius: 0 0 36px 36px;
box-shadow: 0 0 1px white;
}
.top:before {
left: 4px;
bottom: 4px;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(transparent 50%, #F36E3E 50%);
}
.left .top:before {
animation: rotate2 2s linear infinite;
}
.right .top:before {
animation: rotate1 2s linear infinite;
}
.top:after {
top: 35px;
left: 12px;
width: 6px;
height: 13px;
background: white;
box-shadow: 0 0 1px white;
}
.left {
display: inline-block;
margin-right: 10px;
animation: rotate1 2s cubic-bezier(.39,1.52,.46,.92) infinite;
}
.right {
display: inline-block;
animation: rotate2 2s cubic-bezier(.39,1.52,.46,.92) infinite;
}
@keyframes rotate1{
0% {transform: rotate(0deg);}
50% {transform:rotate(22deg);}
}
@keyframes rotate2{
0% {transform:rotate(0deg);}
50% {transform:rotate(-22deg);}
}
ul {
list-style: none;
margin: 0;
padding: 0;
width: 70px;
height: 25px;
position: relative;
opacity: 0;
animation: 2s fadeInUp infinite linear 2s;
}
li {
width: 6px;
height: 15px;
background: white;
position: absolute;
box-shadow: 0 0 1px white;
transform-origin: bottom;
}
li:nth-child(1) {
left: 26px;
bottom: 5px;
transform: rotate(-35deg);
}
li:nth-child(2) {
left: 34px;
bottom: 8px;
}
li:nth-child(3) {
left: 42px;
bottom: 5px;
transform: rotate(35deg);
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: scaleY(1);
}
33% {
opacity: 1;
transform: scaleY(1.4);
}
64% {
opacity: .1;
transform: scaleY(1);
}
100% {
opacity: 0;
transform: scaleY(.3);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.