Skip to content

Instantly share code, notes, and snippets.

/fiddle.html

Created March 20, 2018 10:45
Show Gist options
  • Save anonymous/e537546268c34a46678110f05ad041a7 to your computer and use it in GitHub Desktop.
Save anonymous/e537546268c34a46678110f05ad041a7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fiddle.html
<div class="wrap">
<div class="box-wrap">
<div class="box">
<div class="inner">
<div class="left"></div>
<div class="right">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="inner">
<div class="left"></div>
<div class="right">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</div>
</div>
</div>
<div class="box box3">
<div class="inner">
<div class="left"></div>
<div class="right">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="inner">
<div class="left"></div>
<div class="right">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="inner">
<div class="left"></div>
<div class="right">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="inner">
<div class="left"></div>
<div class="right">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="inner">
<div class="left"></div>
<div class="right">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Raw
fiddle.scss
.wrap {
overflow: hidden;
height: 268px;
position: relative;
//border: 1px solid red;
text-align: center;
&:after {
display: block;
content: "";
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
}
.box-wrap {
display: inline-block;
margin: auto;
padding-top: 40px;
position: relative;
top: 0;
animation: move 9s ease-in-out infinite;
}
.box {
width: 300px;
height: 80px;
margin-bottom: 8px;
background: #FFFFFF;
border: 1px solid #EBEBED;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.inner {
display: flex;
width: 100%;
height: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 52px;
height: 100%;
/* Rectangle 4: */
background: rgba(0,0,0,0.05);
border-radius: 2px;
}
.right {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
flex-grow: 1;
height: 100%;
padding: 0 8px;
}
.line {
width: 100%;
height: 8px;
margin-bottom: 8px;
/* Rectangle 4 Copy 3: */
background: rgba(0,0,0,0.05);
border-radius: 1px;
&:last-child {
margin-bottom: 0;
}
&.line2 {width: 70%;}
&.line3 {display:flex;flex-direction: row;background: none;border-radius: 0;}
}
.dot {
width: 8px;
height: 8px;
margin-right: 6px;
/* Rectangle 4 Copy 3: */
background: rgba(0,0,0,0.05);
border-radius: 1px;
}
}
.box3 {
border-color: gray;
animation: selection 9s ease infinite, scale 9s linear infinite;
transform: scale(1);
}
@-webkit-keyframes move {
20% { top: -84px; }
25% { top: -84px; }
45% { top: -168px; }
50% { top: -168px; }
70% { top: -252px; }
75% { top: -252px; }
95% { top: -336px; }
100% { top: -336px; }
100% { top: 0; }
}
@-webkit-keyframes selection {
0% {
background-color: #FFFFFF;
border-color: #EBEBED;
}
42% {
background-color: #FFFFFF;
border-color: #EBEBED;
}
46% {
background-color: rgba(13,192,105,0.02);
border-color: #0DC069;
}
//47% { border-color: red;}
100% {
background-color: rgba(13,192,105,0.02);
border-color: #0DC069;
}
}
@-webkit-keyframes scale {
0% { transform: scale(1);}
42% { transform: scale(1);}
43% { transform: scale(0.9);}
44.6% { transform: scale(1.1);}
45.6% { transform: scale(1);}
//100% {border-color: green;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment