<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/andylorimer/pen/NGMqZj?depth=everything&limit=all&order=popularity&page=56&q=avatar&show_forks=false" />
<link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css">
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Nunito');
body {
margin: 0;
padding: 0;
font-family: 'Nunito';
background: #f7f7f7;
}
#container {
position: absolute;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #0080ff;
border-radius: 10px;
box-shadow: 0 5px 30px 5px rgba(0, 0, 0, .2);
font-size: 22px;
color: #fff;
text-align: center;
cursor: pointer;
overflow: hidden;
-webkit-transition: padding .3s ease, background .3s ease 1.6s;
-moz-transition: padding .3s ease, background .3s ease 1.6s;
-o-transition: padding .3s ease, background .3s ease 1.6s;
transition: padding .3s ease, background .3s ease 1.6s;
}
#image-holder {
position: absolute;
top: -110%;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
-webkit-transition-delay: 1.5s;
-moz-transition-delay: 1.5s;
-o-transition-delay: 1.5s;
transition-delay: 1.5s;
left: 0;
width: 100%;
background: #fff;
}
#image-holder.move {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#container.file-over {
padding: 10px;
}
#container.file-over .arrow {
top: 50%;
opacity: 1;
}
.box {
position: absolute;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, .2);
border-radius: 10px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 0;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.box:before {
content: '';
position: absolute;
top: 40%;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40%;
height: 40%;
border: dashed 2px rgba(255, 255, 255, .9);
border-radius: 5px;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.box:after {
content: '';
position: absolute;
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 45%;
height: 45%;
border-radius: 5px;
background: rgba(255, 255, 255, .3);
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.progress {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #fff;
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-o-transition: 1s ease;
transition: 1s ease;
}
.progress.complete {
width: 100%;
}
#container.file-over .box {
width: 80px;
height: 3px;
border-radius: 100px;
top: 70%;
}
#container.file-over .box:before, #container.file-over .box:after {
-webkit-transform: translate(-50%, -50%) scale(0);
-moz-transform: translate(-50%, -50%) scale(0);
-o-transform: translate(-50%, -50%) scale(0);
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
/* Arrow icon */
.arrow {
opacity: 0;
position: absolute;
z-index: 0;
top: 30%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 35px;
height: 35px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/269193/arrow-down.png) no-repeat center;
background-size: 60px;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
overflow: hidden;
}
/* Popup */
.top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 500px;
}
#popup {
position: absolute;
top: 6%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 300px;
height: auto;
padding: 20px 15px;
box-shadow: 0 3px 20px 2px rgba(0, 0, 0, .1);
border-radius: 5px;
z-index: 10;
}
.profile-avatar {
position: absolute;
width: 40px;
border-radius: 100%;
top: 0;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.message {
position: relative;
display: block;
width: 80%;
padding: 10px 10px;
margin: 0 auto;
font-size: 14px;
text-align: center;
}</style></head><body>
<div class="top animated bounceIn">
<div id="popup">
<span class="message">
Profile Image Uploader<br />
<small>Drop your image into the space below</small>
</span>
</div>
</div>
<div id="container">
<div class="box">
<div class="progress"></div>
</div>
<div class="v-align">
<!--<svg>
<path d="M25,75a50,50 0 1,0 100,0a50,50 0 1,0 -100,0"></path>
</svg>-->
<div class="arrow"></div>
</div>
<img id="image-holder">
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='https://bgrins.github.io/filereader.js/filereader.js'></script>
<script >$(function() {
$('#container').on('dragover', function(e) {
e.preventDefault();
$(this).addClass('file-over');
//$('svg path').show();
});
$('#container').on('dragleave', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('file-over');
});
$('#container').on('drop', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('file-over').stop(true, true).css({
background:'#fff'
});
$('.progress').toggleClass('complete');
$('#image-holder').addClass('move');
});
var dropzone = document.getElementById("container");
FileReaderJS.setupDrop(dropzone, {
readAsDefault: "DataURL",
on: {
load: function(e, file) {
var img = document.getElementById("image-holder");
img.onload = function() {
document.getElementById("image-holder").appendChild(img);
};
img.src = e.target.result;
}
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
