Chia sẻ code loading deadline ấn tượng
Code này rất ấn tượng với sự kết hợp giữa HTML và Css trông rất đẹp cho bạn thỏa sức Design.
Chia sẻ code loading deadline ấn tượng
Code HTML
<div id="deadline">
<svg preserveAspectRatio="none" id="line" viewBox="0 0 581 158" enable-background="new 0 0 581 158">
<g id="fire">
<rect id="mask-fire-black" x="511" y="41" width="38" height="34"/>
<g>
<defs>
<rect id="mask_fire" x="511" y="41" width="38" height="34"/>
</defs>
<clipPath id="mask-fire_1_">
<use xlink:href="#mask_fire" overflow="visible"/>
</clipPath>
<g id="group-fire" clip-path="url(#mask-fire_1_)">
<path id="red-flame" fill="#B71342" d="M528.377,100.291c6.207,0,10.947-3.272,10.834-8.576 c-0.112-5.305-2.934-8.803-8.237-10.383c-5.306-1.581-3.838-7.9-0.79-9.707c-7.337,2.032-7.581,5.891-7.11,8.238 c0.789,3.951,7.56,4.402,5.077,9.48c-2.482,5.079-8.012,1.129-6.319-2.257c-2.843,2.233-4.78,6.681-2.259,9.703 C521.256,98.809,524.175,100.291,528.377,100.291z"/>
<path id="yellow-flame" opacity="0.71" fill="#F7B523" d="M528.837,100.291c4.197,0,5.108-1.854,5.974-5.417 c0.902-3.724-1.129-6.207-5.305-9.931c-2.396-2.137-1.581-4.176-0.565-6.32c-4.401,1.918-3.384,5.304-2.482,6.658 c1.511,2.267,2.099,2.364,0.42,5.8c-1.679,3.435-5.42,0.764-4.275-1.527c-1.921,1.512-2.373,4.04-1.528,6.563 C522.057,99.051,525.994,100.291,528.837,100.291z"/>
<path id="white-flame" opacity="0.81" fill="#FFFFFF" d="M529.461,100.291c-2.364,0-4.174-1.322-4.129-3.469 c0.04-2.145,1.117-3.56,3.141-4.198c2.022-0.638,1.463-3.195,0.302-3.925c2.798,0.821,2.89,2.382,2.711,3.332 c-0.301,1.597-2.883,1.779-1.938,3.834c0.912,1.975,3.286,0.938,2.409-0.913c1.086,0.903,1.826,2.701,0.864,3.924 C532.18,99.691,531.064,100.291,529.461,100.291z"/>
</g>
</g>
</g>
<g id="progress-trail">
<path fill="#FFFFFF" d="M491.979,83.878c1.215-0.73-0.62-5.404-3.229-11.044c-2.583-5.584-5.034-10.066-7.229-8.878
c-2.854,1.544-0.192,6.286,2.979,11.628C487.667,80.917,490.667,84.667,491.979,83.878z"/>
<path fill="#FFFFFF" d="M571,76v-5h-23.608c0.476-9.951-4.642-13.25-4.642-13.25l-3.125,4c0,0,3.726,2.7,3.625,5.125
c-0.071,1.714-2.711,3.18-4.962,4.125H517v5h10v24h-25v-5.666c0,0,0.839,0,2.839-0.667s6.172-3.667,4.005-6.333
s-7.49,0.333-9.656,0.166s-6.479-1.5-8.146,1.917c-1.551,3.178,0.791,5.25,5.541,6.083l-0.065,4.5H16c-2.761,0-5,2.238-5,5v17
c0,2.762,2.239,5,5,5h549c2.762,0,5-2.238,5-5v-17c0-2.762-2.238-5-5-5h-3V76H571z"/>
<path fill="#FFFFFF" d="M535,65.625c1.125,0.625,2.25-1.125,2.25-1.125l11.625-22.375c0,0,0.75-0.875-1.75-2.125
s-3.375,0.25-3.375,0.25s-8.75,21.625-9.875,23.5S533.875,65,535,65.625z"/>
</g>
<g>
<defs>
<path id="SVGID_1_" d="M484.5,75.584c-3.172-5.342-5.833-10.084-2.979-11.628c2.195-1.188,4.646,3.294,7.229,8.878
c2.609,5.64,4.444,10.313,3.229,11.044C490.667,84.667,487.667,80.917,484.5,75.584z M571,76v-5h-23.608
c0.476-9.951-4.642-13.25-4.642-13.25l-3.125,4c0,0,3.726,2.7,3.625,5.125c-0.071,1.714-2.711,3.18-4.962,4.125H517v5h10v24h-25
v-5.666c0,0,0.839,0,2.839-0.667s6.172-3.667,4.005-6.333s-7.49,0.333-9.656,0.166s-6.479-1.5-8.146,1.917
c-1.551,3.178,0.791,5.25,5.541,6.083l-0.065,4.5H16c-2.761,0-5,2.238-5,5v17c0,2.762,2.239,5,5,5h549c2.762,0,5-2.238,5-5v-17
c0-2.762-2.238-5-5-5h-3V76H571z M535,65.625c1.125,0.625,2.25-1.125,2.25-1.125l11.625-22.375c0,0,0.75-0.875-1.75-2.125
s-3.375,0.25-3.375,0.25s-8.75,21.625-9.875,23.5S533.875,65,535,65.625z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="progress-time-fill" x="-100%" y="34" clip-path="url(#SVGID_2_)" fill="#BE002A" width="586" height="103"/>
</g>
<g id="death-group">
<path id="death" fill="#BE002A" d="M-46.25,40.416c-5.42-0.281-8.349,3.17-13.25,3.918c-5.716,0.871-10.583-0.918-10.583-0.918
C-67.5,49-65.175,50.6-62.083,52c5.333,2.416,4.083,3.5,2.084,4.5c-16.5,4.833-15.417,27.917-15.417,27.917L-75.5,84.75
c-1,12.25-20.25,18.75-20.25,18.75s39.447,13.471,46.25-4.25c3.583-9.333-1.553-16.869-1.667-22.75
c-0.076-3.871,2.842-8.529,6.084-12.334c3.596-4.22,6.958-10.374,6.958-15.416C-38.125,43.186-39.833,40.75-46.25,40.416z
M-40,51.959c-0.882,3.004-2.779,6.906-4.154,6.537s-0.939-4.32,0.112-7.704c0.82-2.64,2.672-5.96,3.959-5.583
C-39.005,45.523-39.073,48.8-40,51.959z"/>
<path id="death-arm" fill="#BE002A" d="M-53.375,75.25c0,0,9.375,2.25,11.25,0.25s2.313-2.342,3.375-2.791
c1.083-0.459,4.375-1.75,4.292-4.75c-0.101-3.627,0.271-4.594,1.333-5.043c1.083-0.457,2.75-1.666,2.75-1.666
s0.708-0.291,0.5-0.875s-0.791-2.125-1.583-2.959c-0.792-0.832-2.375-1.874-2.917-1.332c-0.542,0.541-7.875,7.166-7.875,7.166
s-2.667,2.791-3.417,0.125S-49.833,61-49.833,61s-3.417,1.416-3.417,1.541s-1.25,5.834-1.25,5.834l-0.583,5.833L-53.375,75.25z"/>
<path id="death-tool" fill="#BE002A" d="M-20.996,26.839l-42.819,91.475l1.812,0.848l38.342-81.909c0,0,8.833,2.643,12.412,7.414
c5,6.668,4.75,14.084,4.75,14.084s4.354-7.732,0.083-17.666C-10,32.75-19.647,28.676-19.647,28.676l0.463-0.988L-20.996,26.839z"/>
</g>
<path id="designer-body" fill="#FEFFFE" d="M514.75,100.334c0,0,1.25-16.834-6.75-16.5c-5.501,0.229-5.583,3-10.833,1.666
c-3.251-0.826-5.084-15.75-0.834-22c4.948-7.277,12.086-9.266,13.334-7.833c2.25,2.583-2,10.833-4.5,14.167
c-2.5,3.333-1.833,10.416,0.5,9.916s8.026-0.141,10,2.25c3.166,3.834,4.916,17.667,4.916,17.667l0.917,2.5l-4,0.167L514.75,100.334z
"/>
<circle id="designer-head" fill="#FEFFFE" cx="516.083" cy="53.25" r="6.083"/>
<g id="designer-arm-grop">
<path id="designer-arm" fill="#FEFFFE" d="M505.875,64.875c0,0,5.875,7.5,13.042,6.791c6.419-0.635,11.833-2.791,13.458-4.041s2-3.5,0.25-3.875
s-11.375,5.125-16,3.25c-5.963-2.418-8.25-7.625-8.25-7.625l-2,1.125L505.875,64.875z"/>
<path id="designer-pen" fill="#FEFFFE" d="M525.75,59.084c0,0-0.423-0.262-0.969,0.088c-0.586,0.375-0.547,0.891-0.547,0.891l7.172,8.984l1.261,0.453
l-0.104-1.328L525.75,59.084z"/>
</g>
</svg>
<div class="deadline-days">
Deadline <span class="day">7</span> <span class="days">days</span>
</div>
</div>
Code CSS
html {
font-size: 1em;
line-height: 1.4;
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #000;
}
#deadline {
width:581px;
max-width: 100%;
height:158px;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#deadline svg {
width: 100%;
}
#progress-time-fill {
animation-name: progress-fill;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* Death */
#death-group {
animation-name: walk;
animation-timing-function: ease;
animation-iteration-count: infinite;
transform: translateX(0);
}
#death-arm {
animation: move-arm 3s ease infinite;
transform-origin: left center;
}
#death-tool {
animation: move-tool 3s ease infinite;
transform-origin: -48px center;
}
/* Designer */
#designer-arm-grop {
animation: write 1.5s ease infinite;
transform: translate(0, 0) rotate(0deg) scale(1, 1);
transform-origin: left top;
}
.deadline-days {
color: #fff;
text-align: center;
width: 100px;
margin: 0 auto;
position: relative;
height: 20px;
font-family: 'Oswald', sans-serif;
}
.deadline-days .inner {
width: 100px;
position: relative;
top: 0;
left: 0;
}
.mask-red,
.mask-white {
position: absolute;
top: 0;
width: 100%;
overflow: hidden;
height: 100%;
}
.mask-red {
left: 0;
width: 0;
color: #BE002A;
animation: text-red 20s ease infinite;
z-index: 2;
background: #000;
}
.mask-white {
right: 0;
}
/* Flames */
#red-flame {
opacity: 0;
animation: show-flames 20s ease infinite, red-flame 120ms ease infinite;
transform-origin: center bottom;
}
#yellow-flame {
opacity: 0;
animation: show-flames 20s ease infinite, yellow-flame 120ms ease infinite;
transform-origin: center bottom;
}
#white-flame {
opacity: 0;
animation: show-flames 20s ease infinite, red-flame 100ms ease infinite;
transform-origin: center bottom;
}
@keyframes progress-fill {
0% {
x: -100%;
}
100% {
x: -3%;
}
}
@keyframes walk {
0% {
transform: translateX(0);
}
6% {
transform: translateX(0);
}
10% {
transform: translateX(100px);
},
15% {
transform: translateX(140px);
}
25% {
transform: translateX(170px);
}
35% {
transform: translateX(220px);
}
45% {
transform: translateX(280px);
}
55% {
transform: translateX(340px);
}
65% {
transform: translateX(370px);
}
75% {
transform: translateX(430px);
}
85% {
transform: translateX(460px);
}
100% {
transform: translateX(520px);
}
}
@keyframes move-arm {
0% {
transform: rotate(0);
}
5% {
transform: rotate(0);
}
9% {
transform: rotate(40deg);
}
80% {
transform: rotate(0);
}
}
@keyframes move-tool {
0% {
transform: rotate(0);
}
5% {
transform: rotate(0);
}
9% {
transform: rotate(50deg);
}
80% {
transform: rotate(0);
}
}
/* Design animations */
@keyframes write {
0% {
transform: translate(0, 0) rotate(0deg) scale(1, 1);
}
16% {
transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
}
32% {
transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
}
48% {
transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
}
65% {
transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
}
83% {
transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
}
}
@keyframes text-red {
0% {
width: 0%;
}
100% {
width: 98%;
}
}
/* Flames */
/* @keyframes show-flames {
0% {
transform: translateY(0);
}
74% {
transform: translateY(0);
}
80% {
transform: translateY(-30px);
}
97% {
transform: translateY(-30px);
}
100% {
transform: translateY(0px);
}
} */
@keyframes show-flames {
0% {
opacity: 0;
}
74% {
opacity: 0;
}
80% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes red-flame {
0% {
transform: translateY(-30px) scale(1, 1);
}
25% {
transform: translateY(-30px) scale(1.1, 1.1);
}
75% {
transform: translateY(-30px) scale(0.8, 0.7);
}
100% {
transform: translateY(-30px) scale(1, 1);
}
}
@keyframes yellow-flame {
0% {
transform: translateY(-30px) scale(0.8, 0.7);
}
50% {
transform: translateY(-30px) scale(1.1, 1.2);
}
100% {
transform: translateY(-30px) scale(1, 1);
}
}
Code JS
// Init
var $ = jQuery;
var animationTime = 20,
days = 7;
$(document).ready(function(){
// timer arguments:
// #1 - time of animation in mileseconds,
// #2 - days to deadline
$('#progress-time-fill, #death-group').css({'animation-duration': animationTime+'s'});
var deadlineAnimation = function () {
setTimeout(function(){
$('#designer-arm-grop').css({'animation-duration': '1.5s'});
},0);
setTimeout(function(){
$('#designer-arm-grop').css({'animation-duration': '1s'});
},4000);
setTimeout(function(){
$('#designer-arm-grop').css({'animation-duration': '0.7s'});
},8000);
setTimeout(function(){
$('#designer-arm-grop').css({'animation-duration': '0.3s'});
},12000);
setTimeout(function(){
$('#designer-arm-grop').css({'animation-duration': '0.2s'});
},15000);
};
function timer(totalTime, deadline) {
var time = totalTime * 1000;
var dayDuration = time / deadline;
var actualDay = deadline;
var timer = setInterval(countTime, dayDuration);
function countTime() {
--actualDay;
$('.deadline-days .day').text(actualDay);
if (actualDay == 0) {
clearInterval(timer);
$('.deadline-days .day').text(deadline);
}
}
}
var deadlineText = function () {
var $el = $('.deadline-days');
var html = '<div class="mask-red"><div class="inner">' + $el.html() + '</div></div><div class="mask-white"><div class="inner">' + $el.html() + '</div></div>';
$el.html(html);
}
deadlineText();
deadlineAnimation();
timer(animationTime, days);
setInterval(function(){
timer(animationTime, days);
deadlineAnimation();
console.log('begin interval', animationTime * 1000);
}, animationTime * 1000);
});
Nguồn http://codepen.io/jonathansilva/pen/mEoEVw
Email: quochieuu@gmail.com
Facebook: fb.com/hieuqdev
CV: cv.quochieu.com
Post a Comment
Post a Comment