<div class="row">
	<div class="container">
		<div class="d-row">
			<div class="box">
				<div class="left"><p>Report is saved!</p></div>
				<div class="right"><p><a href="#">Edit report</a></p></div>
				<div class="progress"></div>
			</div>
		</div>
	</div>
</div>

.container{
	width:1160px;
	max-width:90%;
	margin:20px auto
}
.d-row{
	display:flex;
	align-items:flex-end;
	height:100vh;
	box-sizing:border-box;
	overflow:hidden
}
.box{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position:relative;
	background-color:#000;
	color:#fff;
	padding:0 15px;
	border-radius:8px;
	opacity:0;
	transform:translateY(100%);
	animation:box-visible 3s linear infinite 3s;
}
.box a{
	text-decoration:none;
	color:#fff
}
.box a:hover{
	text-decoration:underline
}
.right{
	margin-left:auto;
}
@keyframes box-visible {
	5% {transform:none;opacity:1;}
	95% {transform:none;opacity:1;}
}
.progress{
	background-color:#5ca55c;
	height:3px;
	width:calc(100% - 30px);
    position:absolute;
    bottom:4px;
    right:15px;
	animation:my-progress 3s linear infinite 3s;
}
@keyframes my-progress {
	from {width: 0;}
}