HR-Admin-Web-App-UI-UX

HTML

              
                <!-- 
This is a design I took from: 
https://dribbble.com/shots/1228248-HR-Admin-Web-App-UI-UX?list=searches&tag=flat_ui&offset=67 

Just for fun and to stay sharp. 
**FOR BETTER RESULTS PLEASE VIEW IN CHROME and FULLSCREEN**

Still a work in progress though.

-->



<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
		<defs>
		<g id="icon-search">
			<path class="path1" d="M31.12 31.12c-1.174 1.174-3.077 1.174-4.25 0l-5.304-5.304c-2.18 1.399-4.758 2.232-7.541 2.232-7.745 0-14.024-6.278-14.024-14.024s6.279-14.024 14.024-14.024c7.746 0 14.024 6.278 14.024 14.024 0 2.782-0.834 5.361-2.232 7.542l5.304 5.304c1.174 1.174 1.174 3.076 0 4.249zM14.024 4.007c-5.532 0-10.017 4.484-10.017 10.017s4.485 10.017 10.017 10.017c5.533 0 10.017-4.484 10.017-10.017s-4.484-10.017-10.017-10.017z"></path>
		</g>
		</defs>
	</svg>
	<div class="wrapper">
		<nav id="leftNav">
			<ul>
				<li class="icon-settings"><span class="active"></span><a href="#"></a></li>
				<li class="icon-home selected"><a href="#"></a></li>
				<li class="icon-calendar"><a href="#"></a></li>
				<li class="icon-circles"><a href="#"></a></li>
				<li class="icon-doneTask"><a href="#"></a></li>
				<li class="icon-stats"><a href="#"></a></li>
			</ul>
		</nav>
		<header>
			<div id="searchBox">
				<form autocomplete="off">
					<label for="search">
						<svg class="icon icon-search" viewBox="0 0 32 32"><use xlink:href="#icon-search"></use></svg></label>
					<input type="text" id="search" class="searchInput" placeholder="Search for tasks, goals and reviews">
				</form>
			</div>
			<nav id="topNav">
				<ul>
					<li class="icon-addCalendar"><a href="#"></a></li>
					<li class="icon-addToCircles"><a href="#"></a></li>
					<li class="icon-notifications"><a href="#"><span class="counter">11</span></a></li>
					<li class="icon-user1"><a href="#"></a></li>
				</ul>
			</nav>
		</header>
		<div class="toDo">
			<div class="reviews">
				<div class="title">
					<h1>Reviews</h1>
					<a href="#"><span class="add addReview">+</span></a>
				</div>
				<form autocomplete="off">
					<ul>
						<li><input type="checkbox" id="review_3"><label for="review_3">360 Monthly Team Review</label><span class="alert"><input class='reviewDate' type="text" readonly value="Due in 2 days"></span></li>
						<li><input type="checkbox" id="review_2"><label for="review_2">Self Review</label><span><input class='reviewDate' type="text" readonly value="Due in 5 days"></span></li>
						<li><input type="checkbox" id="review_1"><label for="review_1">6-Month Performance Review</label><span><input class='reviewDate' type="text" readonly value="Due in 1 week"></span></li>
					</ul>
				</form>
			</div>
			<div class="goals">
				<div class="title">
					<h1>Goals</h1>
					<a href="#"><span class="add addGoal">+</span></a>
				</div>
				<form autocomplete="off">
					<ul>
						<li><input type="checkbox" id="goal_4"><label for="goal_4">5 Team Goals Completed</label><span class="warn-score"><input class='goalAchivements' type="text" readonly value="Awaiting Scoring"></span></li>
						<li><input type="checkbox" id="goal_3"><label for="goal_3">Team Goals Set</label><span class="warn-approval"><input class='goalAchivements' type="text" readonly value="Awaiting Approval"></span></li>
						<li><input type="checkbox" id="goal_2"><label for="goal_2">1 Team Goal Overdue</label></li>
						<li><input type="checkbox" id="goal_1"><label for="goal_1">Achieve Sales Quota</label></li>
					</ul>
				</form>
			</div>
		</div>
		<div class="yourTeam">
			<form action="">
				<select name="" id="">
					<option value="yourTeam" data-icon="icon-team">Your Team</option>
				</select>
			</form>
		</div>
		<div class="details">
			<ul>
				<li>
					<div class="reviewFeedback">
						<div class="details-header">
							<h2>Review Feedback</h2>
							<a href="#" class="icon-setReview">
								<span class="tooltip">
									<span>Set a Review</span>
								</span>
							</a>
						</div>
						<ul>
							<li>
								<div class="score">
									<p>85</p>
									<span class="circle purple"></span>
								</div>
								<div class="info">
									<p class="title">Monthly Check-in</p>
									<p class="type">Self Review</p>
								</div>
							</li>
							<li>
								<div class="score">
									<p>82</p>
									<span class="circle orange"></span>
								</div>
								<div class="info">
									<p class="title">Leadership Assessment</p>
									<p class="type">Manager Review</p>
								</div>
							</li>
							<li>
								<div class="score">
									<p>76</p>
									<span class="circle yellow"></span>
								</div>
								<div class="info">
									<p class="title">Team Peer Assessment</p>
									<p class="type">360 Review</p>
								</div>
							</li>
						</ul>
						<div class="chart-bar">
							<ul id="numbers">
								<li><span>100</span></li>
								<li><span>75</span></li>
								<li><span>50</span></li>
								<li><span>25</span></li>
							</ul>
							<ul id="bars">
								<li><div data-percentage="52" class="bar">67</div><span>Team</span></li>
								<li><div data-percentage="65" class="bar">83</div><span>Compagny</span></li>
							</ul>
						</div>
						<div class="action"><p><a href="#" class="icon-onDemandReview">OnDemand Review</a></p></div>
					</div>
				</li>
				<li>
					<div class="goalProgress">
						<div class="details-header">
							<h2>Goal Progress</h2>
							<a href="#" class="icon-setGoal">
								<span class="tooltip">
									<span>Set a Goal</span>
								</span>
							</a>
						</div>
						<ul>
							<li>
								<div class="icon-user1"></div>
								<div class="info">
									<p class="name">Vienna Calico <span class="position">&bull; Project Lead</span></p>
									<div class="progressBar">
										<span class="progress" data-progressValue="90"></span>
									</div>
								</div>
							</li>
							<li>
								<div class="icon-user2"></div>
								<div class="info">
									<p class="name">Vienna Calico <span class="position">&bull; Project Lead</span></p>
									<div class="progressBar">
										<span class="progress" data-progressValue="83"></span>
									</div>
								</div>
							</li>
							<li>
								<div class="icon-user3"></div>
								<div class="info">
									<p class="name">Vienna Calico <span class="position">&bull; Project Lead</span></p>
									<div class="progressBar">
										<span class="progress" data-progressValue="75"></span>
									</div>
								</div>
							</li>
							<li>
								<div class="icon-user4"></div>
								<div class="info">
									<p class="name">Vienna Calico <span class="position">&bull; Project Lead</span></p>
									<div class="progressBar">
										<span class="progress" data-progressValue="47"></span>
									</div>
								</div>
							</li>
							<li>
								<div class="icon-user5"></div>
								<div class="info">
									<p class="name">Vienna Calico <span class="position">&bull; Project Lead</span></p>
									<div class="progressBar">
										<span class="progress" data-progressValue="20"></span>
									</div>
								</div>
							</li>
						</ul>
						<div class="action"><p><a href="#" class="icon-manageGoals">Manage Goals</a></p></div>
					</div>
				</li>
				<li>
					<div class="notes">
						<div class="details-header">
							<h2>Notes</h2>
							<a href="#" class="icon-setNote">
								<span class="tooltip">
									<span>Set a Note</span>
								</span>
							</a>
						</div>
						<div class="chart">
							<div class="doughnutChart"></div>
							<ul class="chart-legend">
								<li>
									<span></span>
									<em>Positive</em>
								</li>
								<li>
									<span></span>
									<em>Neutral</em>
								</li>
								<li>
									<span></span>
									<em>Negative</em>
								</li>
								<li>
									<span></span>
									<em>Self</em>
								</li>
							</ul>
						</div>
						<div class="chart-bar">
							<ul id="numbers">
								<li><span>60</span></li>
								<li><span>45</span></li>
								<li><span>30</span></li>
								<li><span>15</span></li>
							</ul>
							<ul id="bars">
								<li><div data-percentage="52" class="bar">+41</div><span>Team</span></li>
								<li><div data-percentage="65" class="bar">+47</div><span>Compagny</span></li>
							</ul>
						</div>
						<div class="action"><p><a href="#" class="icon-askFeedback">Ask for feedback</a></p></div>
					</div>
				</li>
			</ul>
		</div>
		<footer></footer>
	</div>

CSS

              
                /* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*BASE CSS*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-family: Arial, Helvetica, sans-serif; }
html, body { width: 100%; min-height: 100%; color: #6381a1; }
a { text-decoration: none; }

/*STYLING*/
.wrapper {
	display: table;
	max-width: 1300px;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

/*HEADER CSS*/
header { float: left; width: 94%; margin-left: 78px; }
#topNav { float: left; background-color: #4b6c8b; height: 70px; }
#topNav ul { height: 100%; display: inline-table; border: 1px solid #334c64; border-right: none; }
#topNav ul li {
	float: left;
	position: relative;
	width: 78px;
	height: 100%;
	border: 1px solid #5d84a4;
	border-right: 1px solid #334c64;
	border-bottom:none;
	text-align: center;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.icon-search { position: absolute; top: 50%; margin-top: -10px; width:20px; height: 20px; fill: #6889a7; }
.icon-addCalendar { background: url(http://i58.tinypic.com/5wiglj.png) no-repeat center;  }
.icon-addToCircles { background: url(http://i57.tinypic.com/2n0ovt4.png) no-repeat center; }
.icon-notifications { background: url(http://i58.tinypic.com/w12pup.png) no-repeat center; }
.icon-user1 { background: #3D5B77 url(http://i57.tinypic.com/w6p74p.png) no-repeat center; }
.icon-user2 { background: #3D5B77 url(http://i60.tinypic.com/2uge3ac.png) no-repeat center; }
.icon-user3 { background: #3D5B77 url(http://i57.tinypic.com/2ahcvbl.png) no-repeat center; }
.icon-user4 { background: #3D5B77 url(http://i61.tinypic.com/20qba6o.png) no-repeat center; }
.icon-user5 { background: #3D5B77 url(http://i59.tinypic.com/spxcgw.png) no-repeat center; }
.icon-settings { background: url(http://i62.tinypic.com/28ai7f5.png) no-repeat center; }
.icon-home { background: url(http://i62.tinypic.com/2zyy979.png) no-repeat center; }
.icon-calendar { background: url(http://i58.tinypic.com/2prs1go.png) no-repeat center; }
.icon-circles { background: url(http://i61.tinypic.com/28vta1i.png) no-repeat center; }
.icon-doneTask { background: url(http://i62.tinypic.com/hu1640.png) no-repeat center; }
.icon-stats { background: url(http://i59.tinypic.com/214nir.png) no-repeat center; }
.icon-onDemandReview:before { content: url(http://i59.tinypic.com/2nqb87o.png) no-repeat center; position: absolute; margin-left: -30px; margin-top: -1px; }
.icon-manageGoals:before { content: url(http://i59.tinypic.com/24g6p2s.png) no-repeat center; position: absolute; margin-left: -30px; margin-top: -1px; }
.icon-askFeedback:before { content: url(http://i58.tinypic.com/n5pmy1.png) no-repeat center; position: absolute; margin-left: -30px; margin-top: -1px; }
.icon-setReview:before { content: url(http://i58.tinypic.com/se96yv.png) no-repeat center; }
.icon-setGoal:before { content: url(http://i59.tinypic.com/xp7rdf.png) no-repeat center; }
.icon-setNote:before { content: url(http://i58.tinypic.com/1znwkld.png) no-repeat center; }

.icon-up-down { background: url(http://i60.tinypic.com/1zx9mki.png) no-repeat center; width: 10px; height: 22px; top: 6px !important; }
.icon-team { background: url(http://i58.tinypic.com/29c1dz.png) no-repeat center left; width: 34px; height: 22px; }


#topNav ul li.icon-notifications a { color: #FFF; text-decoration: none; }
#topNav ul li.icon-notifications .counter {
	position: absolute;
	right:0;
	padding-top: 5px;
	width: 24px;
	height: 16px;
	font-family: monospace;
	font-weight: bold;
	background-color: #e07182;
}
#topNav ul li.icon-notifications .counter:after {
	content: "";
	position: absolute;
	border: 8px solid rgba(0, 0, 0, 0);
	border-top-color: #e07182;
	border-left:0;
	left: 5px;
	top: 21px;
}
#topNav ul li:last-child { border-left: 0; border-right: none; }

#searchBox { position: relative; border-right: 1px solid #334c64; width: 73.8%; height: 70px; background-color: #3d5b77; float: left; }
#searchBox form { padding: 0 20px 0 30px; }
.searchInput { 
	height: 70px;
	width: 95%;
	padding: 0 0 0 30px;
	margin: 0;
	background-color: #3d5b77;
	border: none;
	font-family: Arial;
	font-weight: bold;
	font-size: 16px;
	color: #7E9BB8; 
}
.searchInput::-webkit-input-placeholder { /* WebKit browsers */
    color:    #6d88a4;
}
.searchInput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #6d88a4;
    opacity:  1;
}
.searchInput::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #6d88a4;
    opacity:  1;
}
.searchInput:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #6d88a4;
}
.searchInput:active, .searchInput:focus { outline: none; }


/*LEFT NAV CSS*/
#leftNav {
	background-color: #4b6c8b;
	width: 78px;
	height: 100%;
	position: absolute;
}
#leftNav ul li {
	text-align: center;
	height: 70px;
	border: 1px solid #3c5674;
	border-top-color: #537797;
	border-left-color: #537797;
	transition: all ease 0.3s;
	box-sizing: border-box;
}

#leftNav ul li.selected {
	background-color: #3d5b77;
	border: 1px solid #2f4c67;
	border-left: 4px solid #07a9e1;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
#leftNav ul li:hover, #topNav ul li:hover {
	background-color: #54789a;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
#leftNav ul li a, #topNav ul li a { float: left;width: 100%;height: 100%; }


/*MAIN CONTENT CSS*/
.toDo { float: left; }
.toDo, .yourTeam, .details { width: 94%; display: table; margin-left: 78px; }
.toDo .reviews { border-right: 1px solid #d7e3f0; }
.toDo .reviews, .toDo .goals { width: 50%; display: table-cell; padding: 25px 30px 15px 25px; box-sizing: border-box; border-bottom: 1px solid #ccdcec; }
.toDo .reviews h1, .toDo .goals h1 { float: left; font-size: 20px; color: #58789a; margin-bottom: 20px; margin-right: 10px; }
.toDo .reviews form, .toDo .goals form { clear: both; }
.toDo form ul { position: relative; }
.toDo .reviews form ul li, .toDo .goals form ul li {
	position: relative;
	padding: 15px 5px 15px;
	border-bottom: 1px solid #e5eef8;
}
.toDo form ul li:last-child { border: none; }
.toDo form ul li input[type=checkbox] { cursor: pointer; position: relative; visibility: hidden; }
.toDo form ul li input[type=checkbox]:after { 
	background-color: white;
	border: 1px solid #bfd2e4;
	border-radius: 2px;
	color: #FFF;
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin-top: -3px;
	line-height: 16px;
	position: absolute;
	text-align: center;
	visibility: visible;
}
.toDo form ul li input[type=checkbox]:checked:after {
	border: 1px solid #61c6cf;
	color: #61c6cf;
	content: "✓";
}
.toDo form ul li input#temp {
	color: #6381A1;
	border: none;
	outline: none;
	font-size: 100%;
	width: 50%;
	height: 18px;
	padding: 0;
	margin: 0;
	background-color: transparent;
}
.toDo form ul li button { display: none; }
.toDo form ul li.active { background-color: #f6fafe; }
.toDo form ul li.active button { display: block; }
.toDo form ul li.active:before { content: ""; position: absolute; border-left: 5px solid #61c6cf;left: -5px; width: 5px; height: 51px; margin-top: -16px; }
.toDo form ul li .reviewDate, .toDo form ul li .goalAchivements {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: right;
	margin-right: 0px;
	background-color: #F6FAFE;
	color: #95AAC0;
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
	margin-top: 12px;
	padding: 5px;
	border-radius: 2px;
}
.toDo form ul li .reviewDate { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.toDo form ul li.active .reviewDate { margin-right: 60px; }
.toDo form ul li span { float: right; position: absolute; right: 0; top: 0; }
.toDo form ul li .alert .reviewDate {
	background-color: #E07182 !important;
	color: #FFF !important;
	width: 110px;
}
.toDo form ul li .alert:before {
	content: "!";
	position: absolute;
	width: 15px;
	height: 19px;
	background-color: #CE7180;
	color: #FFF;
	text-align: center;
	padding: 5px 2px 0px 2px;
	left: -19px;
	margin-top: 12px;
	border-radius: 2px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.toDo form ul li .warn-score .goalAchivements {
	background-color: #ed9e57 !important;
	color: #FFF !important;
}
.toDo form ul li .warn-approval .goalAchivements {
	background-color: #f7bf47 !important;
	color: #FFF !important;
}
.toDo form ul li .ui-datepicker-trigger {
	height: 50px;
	width: 50px;
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	background: #60C6CF url(http://i58.tinypic.com/4gszrr.png) no-repeat center;
}
.toDo form ul li .ui-datepicker-trigger:hover { cursor: pointer; }
.toDo form ul li .ui-datepicker-trigger:before {
	content: "";
	left: -10px;
	top: 21px;
	position: absolute;
	border: 5px solid rgba(0, 0, 0, 0);
	border-right-color: #61C6CF;
}

.toDo form ul li label { margin-left: 15px; }
.toDo form ul li label:hover { cursor: pointer; }
.toDo .add {
	position: relative;
	background-color: #c0d6ec;
	color: #FFF;
	padding: 0px 6px;
	font-weight: bold;
	border-radius: 2px;
	font-size: 22px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.toDo .add:hover { background-color: #80abd2; }
.toDo .add.selected {
	position: relative;
	background-color: #61c6cf;
	color: #FFF;
	padding: 0px 6px;
	font-weight: bold;
	border-radius: 2px;
	font-size: 22px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.toDo .add.selected:after {
	content: "";
	position: absolute;
	border: 5px solid rgba(0, 0, 0, 0);
	border-top-color: #61c6cf;
	left: 8px;
	top: 25px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.yourTeam {
	background-color: #dfebf6;
	text-align: center;
	border-top: 1px solid #ccdcec;
	border-bottom: 1px solid #bdcfe1;
	padding: 14px 0;
	float: left;
}

.details { text-align: center; background-color: #cadbec; float: left; }
.details > ul { display: table; margin: 30px 0; }
.details > ul > li {
	display: inline-table;
	vertical-align: top;
	width: 30%;
	border-radius: 3px;
	box-shadow: 0px 1px 5px -2px #5E7D9B;
	margin: 0 15px 30px;
	background: #FFF;
}
.details > ul > li > div {
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
}
.details > ul > li h2 {
	text-align: left;
	padding: 20px 25px;
	font-size: 18px;
	float: left;
}
.details .details-header { position: relative;background-color: #f6fafe; float: left; width: 100%; }
.details .details-header .icon-setReview,
.details .details-header .icon-setGoal,
.details .details-header .icon-setNote {
	position: relative;
	padding: 8px 10px 6px;
	border: 1px solid #C0D1E3;
	margin: 13px;
	border-radius: 3px;
	float: right;
}

.details .details-header .icon-setReview .tooltip,
.details .details-header .icon-setGoal .tooltip,
.details .details-header .icon-setNote .tooltip {
	pointer-events: none;
	position: absolute;
	z-index: 9999;
	left: 50%;
	bottom: -40px;
	opacity: 0;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.details .details-header .icon-setReview .tooltip span,
.details .details-header .icon-setGoal .tooltip span,
.details .details-header .icon-setNote .tooltip span {
	display: block;
	white-space: nowrap;
	position: relative;
	background: rgba(111, 139, 169, 0.8);
	padding: 3px 10px;
	left: -50%;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFF;
	border-radius: 3px;
	line-height: 2;
}
.details .details-header .icon-setReview .tooltip span:after,
.details .details-header .icon-setGoal .tooltip span:after,
.details .details-header .icon-setNote .tooltip span:after {
	top: -16px;
	border: solid rgba(0, 0, 0, 0);
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	border-bottom-color: rgba(111, 139, 169, 0.8);
	border-width: 8px;
	left: 50%;
	margin-left: -8px;
}
.details .details-header .icon-setReview:hover,
.details .details-header .icon-setGoal:hover,
.details .details-header .icon-setNote:hover { cursor: pointer; background-color: #FFF; }
.details .details-header .icon-setReview:hover span,
.details .details-header .icon-setGoal:hover span,
.details .details-header .icon-setNote:hover span { opacity: 1; transition: all ease 0.3s; }

.details .reviewFeedback > ul li:first-child,
.details .goalProgress > ul li:first-child {
	border-top: 1px solid #d7e3f0;
}
.details .reviewFeedback > ul li, .details .goalProgress > ul li {
	display: table;
	width: 100%;
	background-color: #FFF;
	border-bottom: 1px solid #d7e3f0;
}
.details .goalProgress li:nth-child(even) {
	background-color: #f6fafe;
}
.details .goalProgress .icon-user1 { background-size: 36px; }
.details .reviewFeedback .score,
.details .goalProgress .icon-user1,
.details .goalProgress .icon-user2,
.details .goalProgress .icon-user3,
.details .goalProgress .icon-user4,
.details .goalProgress .icon-user5 {
	width: 25%;
	box-sizing: border-box;
	border-right: 1px dashed #d5e0ed;
	position: relative;
	background-color: #FFF;
	display: table-cell;
	vertical-align: middle;
}
.details .goalProgress .icon-user1,
.details .goalProgress .icon-user2,
.details .goalProgress .icon-user3,
.details .goalProgress .icon-user4,
.details .goalProgress .icon-user5 {
	border: none;
	display: table-cell;
	vertical-align: middle;
}
.details .reviewFeedback .score .circle {
	position: absolute;
	right: -8px;
	top: 50%;
	border-radius: 100%;
	width: 8px;
	height: 8px;
	margin-top: -8px;
	background-color: #FFF;
}
.details .reviewFeedback .score .circle.purple {
	border: 3px solid #A08BCD;
}
.details .reviewFeedback .score .circle.orange {
	border: 3px solid #ec974b;
}
.details .reviewFeedback .score .circle.yellow {
	border: 3px solid #f7bf47;
}
.details .reviewFeedback .score p {
	font-size: 40px;
}
.details .reviewFeedback .info, .details .goalProgress .info {
	text-align: left;
	width: 75%;
	padding: 20px;
	line-height: 18px;
	box-sizing: border-box;
	display: table-cell;
	vertical-align: middle;
}
.details .goalProgress .info { padding-left: 0; }
.details .reviewFeedback .info .title { font-weight: bold; }

.details .goalProgress .name { font-weight: bold; position: relative; margin-top: 1px; }
.details .goalProgress .name .position { font-weight: normal; color: #8ba4be; }
.details .goalProgress .progressBar { height: 15px; width: 80%; float: left; margin-top: 3px; }
.details .goalProgress .progressBar .progress {
	width: 0;
	background-color: #61C6CF;
	color: #61c6cf;
	height: 100%;
	display: block;
	position: relative;
	border-radius: 3px;
	float: left;
	font-weight: bold;
	-webkit-transition: width 1s ease-out;
	-moz-transition: width 1s ease-out;
	-o-transition: width 1s ease-out;
	transition: width 1s ease-out;
}
.details .goalProgress .progressBar .progress.warning {
	background-color: #de808f !important;
	color: #de808f !important;
}
.details .goalProgress .progressBar .progress:after {
	content: attr(data-progressValue) "%";
	position: absolute;
	right: -50px;
}

.details .action {
	background-color: #31b6fc;
	float: left;
	width: 100%;
}
.details .action p a {
	color: #FFF;
	padding: 20px 0;
	font-weight: bold;
	float: left;
	text-align: center;
	width: 100%;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.details .action p a:hover{
	background-color: #05b1ec;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	transition: all ease 0.5s;
}


/*CHART*/
.chart {
	border-top: 1px solid #d7e3f0;
	border-bottom: 1px solid #d7e3f0;
	float: left;
	width: 100%;
}
.doughnutChart {
	position: relative;
	height: 165px;
	padding: 20px 0;
	background: #FFF;
}
.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 3px;
  background: rgba(111, 139, 169, 0.8);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  pointer-events: none;
}
.doughnutTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(111, 139, 169, 0.8);
      line-height: 0;
}
.doughnutSummary {
  position: relative;
	top: -50%;
	left: 50%;
	color: #6f8ba9;
	font-weight: bold;
	text-align: center;
	cursor: default;
}
.doughnutSummaryTitle {
  position: absolute;
  width: 100%;
  top: 5px;
  font-size: 14px;
  letter-spacing: .06em;
}
.doughnutSummaryNumber {
	position: absolute;
	width: 100%;
	margin-top: 30%;
	margin-left: 2%;
	font-size: 50px;
}
.doughnutSummaryNumber:before {
	content: "+";
	font-size: 25px;
	position: absolute;
	margin-top: 20%;
	margin-left: -15%;
}
.chart path:hover { opacity: .65; }


.chart-legend {
	list-style-type: none;
	padding: 0;
	margin: 0;
	background: #FFF;
	font-size: 13px;
	float: left;
	width: 100%;
	background-color: #FFFFFF;
}
.chart-legend li {
	height: 1.25em;
	margin-bottom: 0.7em;
	padding: 0 1.5em;
	position: relative;
	color: #97b3ce;
	font-weight: bold;
	display: inline-block;
}
.chart-legend li span {
	position: absolute;
	left: 0;
	top: 50%;
	border-radius: 100%;
	width: 8px;
	height: 8px;
	margin-top: -8px;
	background-color: #FFF;
}
.chart-legend em {
	font-style: normal;
}

.chart-bar {
	width: 100%;
	float: left;
	padding: 11px 0 0px;
	margin-bottom: 30px;
	display: block;
	position: relative;
	border-bottom: 1px solid #d7e3f0;
}
.chart-bar #numbers {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	background-color: #f6fafe;
	top: 0;
}
.chart-bar #numbers li {
	text-align: left;
	margin: 0 2em 0 4em;
	list-style: none;
	height: 25px;
	border-bottom: 1px solid #d7e3f0;
	position: relative;
	top: 0;
}

.chart-bar #numbers li span {
	color: #8ba4be;
	position: absolute;
	bottom: -8px;
	right: 103%;
}
.chart-bar #bars {
	display: inline-block;
	padding: 0;
	position: relative;
	float: left;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}
.chart-bar #bars li {
	display: inline-block;
	width: 80px;
	height: 120px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.chart-bar #bars li .bar {
	display: block;
	width: 45px;
	color: #FFF;
	font-weight: bold;
	margin-left: 18px;
	padding-top: 10px;
	background: #7fa1c2;
	border-radius: 3px;
	position: absolute;
	bottom: -3px;
	height: 0;
	-webkit-transition: height 1s ease-in-out;
	-moz-transition: height 1s ease-in-out;
	-o-transition: height 1s ease-in-out;
	transition: height 1s ease-in-out;
}
.chart-bar #bars li .bar:hover {
  background-color: #6f8ba9;
  cursor: pointer;
}

.chart-bar #bars li span {
  color: #8ba4be;
  width: 100%;
  position: absolute;
  bottom: -1.5em;
  left: 0;
  text-align: center;
}


/*SELECT BOX IT CSS*/
/*
 * jquery.selectBoxIt.css 3.8.1
 * Author: @gregfranko
 */

/*
  Common CSS Properties
  ---------------------
  These properties will be applied to any themes that you use
*/

/* SelectBoxIt container */
.selectboxit-container {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

/* Styles that apply to all SelectBoxIt elements */
.selectboxit-container * {
  font: 14px Helvetica, Arial;
  /* Prevents text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  outline: none;
  white-space: nowrap;
}

/* Button */
.selectboxit-container .selectboxit {
  width: 150px !important; /* Width of the dropdown button */
  cursor: pointer;
  margin: 0;
  padding: 5px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  position: relative;
}

/* Height and Vertical Alignment of Text */
.selectboxit-container span, .selectboxit-container .selectboxit-options a {
  height: 30px; /* Height of the drop down */
  line-height: 30px; /* Vertically positions the drop down text */
  display: block;
}

/* Focus pseudo selector */
.selectboxit-container .selectboxit:focus {
  outline: 0;
}

/* Disabled Mouse Interaction */
.selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled {
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  cursor: default;
}

/* Button Text */
.selectboxit-text {
  text-indent: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.selectboxit .selectboxit-option-icon-container {
  margin-left: 5px;
}

/* Options List */
.selectboxit-container .selectboxit-options {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 100%;  /* Minimum Width of the dropdown list box options */
  *width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  cursor: pointer;
  display: none;
  z-index: 9999999999999;
  border-radius: 6px;
  text-align: left;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* Individual options */
 .selectboxit-option .selectboxit-option-anchor{
  padding: 0 2px;
}

/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
  text-decoration: none;
}

/* Individual Option Optgroup Header */
.selectboxit-option, .selectboxit-optgroup-header {
  text-indent: 5px; /* Horizontal Positioning of the select box option text */
  margin: 0;
  list-style-type: none;
}

/* The first Drop Down option */
.selectboxit-option-first {
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}

/* The first Drop Down option optgroup */
.selectboxit-optgroup-header + .selectboxit-option-first {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

/* The last Drop Down option */
.selectboxit-option-last {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* Drop Down optgroup headers */
.selectboxit-optgroup-header {
  font-weight: bold;
}

/* Drop Down optgroup header hover psuedo class */
.selectboxit-optgroup-header:hover {
  cursor: default;
}

/* Drop Down down arrow container */
.selectboxit-arrow-container {
  /* Positions the down arrow */
  width: 30px;
  position: absolute;
  right: 0;
}

/* Drop Down down arrow */
.selectboxit .selectboxit-arrow-container .selectboxit-arrow {
  /* Horizontally centers the down arrow */
  margin: 0 auto;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
}

/* Drop Down down arrow for jQueryUI and jQuery Mobile */
.selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon {
  top: 30%;
}

/* Drop Down individual option icon positioning */
.selectboxit-option-icon-container {
  float: left;
}

.selectboxit-container .selectboxit-option-icon {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Drop Down individual option icon positioning */
.selectboxit-option-icon-url {
  width: 18px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  height: 100%;
  background-position: center;
  float: left;
}

.selectboxit-rendering {
  display: inline-block !important;
  *display: inline !important;
  zoom: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon {
  background-color: inherit;
}

/* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon-triangle-1-s {
  background-position: -64px -16px;
}

/*
  Default Theme
  -------------
  Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme
*/
.selectboxit-btn {
  background-color: #f6fafe;
  box-shadow: 0px 2px 5px -2px;
  transition: all ease 0.3s;
}

.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
  color: #7fa1c2;
  background-color: #FFF;
  transition: all ease 0.3s;
}

.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus {
  color: #333333;
  text-decoration: none;
  background-position: 0 -15px;
}

.selectboxit-default-arrow {
  width: 0;
  height: 0;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.selectboxit-list {
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.selectboxit-list .selectboxit-option-anchor {
  color: #333333;
}

.selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor {
  color: #ffffff;
  background-color: #4b6c8b;
}

.selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor {
  color: #999999;
}

JS

              
                ;(function ($, window, undefined) {
	$(function() {
		$("select").selectBoxIt({
			downArrowIcon: "icon-up-down"
		});

		$("a").on("click", function(e) { e.preventDefault(); });

		$("#bars li .bar").each( function( key, bar ) {
			var percentage = $(this).data('percentage');
	
			$(this).css('height', percentage + '%');
		});

		function updateItemState() {
			var $this = $(this),
				isChecked = $this.is(":checked");

			$this.parent("li").toggleClass("active", isChecked);
		}

		function dateDiff( str1, str2 ) {
			var diff = Date.parse( str2 ) - Date.parse( str1 ); 
			return isNaN( diff ) ? NaN : {
				diff : diff,
				ms : Math.floor( diff            % 1000 ),
				s  : Math.floor( diff /     1000 %   60 ),
				m  : Math.floor( diff /    60000 %   60 ),
				h  : Math.floor( diff /  3600000 %   24 ),
				d  : Math.floor( diff / 86400000        )
			};
		}
		function updateReviewDate($el) {
			var today = new Date(),
				//month/day/year
				todayStr = (today.getMonth()+1)+"/"+today.getDate()+"/"+today.getFullYear(),
				selectedDate = $el.attr("data-selected-date"),
				diff =  dateDiff(todayStr, selectedDate);

			var str = diff.d > 1 && diff.d < 7 ? "days" :
					  diff.d === 1 ? "day" : 
					  diff.d >= 7 && diff.d < 14 ? "week" : "weeks";

			$el.parent("span").removeClass("alert");
			if (diff.d < 3) {
				$el.parent("span").addClass("alert");
			} else if (diff.d >= 7) {
				var weeks = Math.floor(diff.d / 7);
				diff.d = weeks;
			}
			
			$el.val("Due in " +diff.d+ " " + str);
		}

		var datepickerOpts = {
			constrainInput: true,
			showOn: 'button',
			buttonText: '',
			minDate: "+1d",
			onSelect: function(dateText, inst) {
				if ($("#temp").size()) {
					$("#temp").focus();
				}
				$(this).attr("data-selected-date", dateText);
				updateReviewDate($(this));
			}
		}
		$(".reviewDate").datepicker(datepickerOpts);

		$("#leftNav ul li").on("click", function() {
			var $this = $(this),
				$links = $("#leftNav ul li");

			$links.removeClass("selected");
			$this.addClass("selected");
		});

		$(".toDo ul li input[type=checkbox]").on("click", updateItemState);

		var isEditing;
		$(".toDo .addReview").on("click", function() {
			var $this = $(this),
				$list = $(".reviews").find("ul"),
				lastID = $list.find("li:first input").attr("id").split("_").pop();


			if (isEditing) { $("#temp").focus(); return false; }

			$this.addClass("selected");
			$list.prepend("<li><input type='checkbox' id='review_"+(parseInt(lastID) + 1)+"'><label for='review_"+(parseInt(lastID) + 1)+"'><input type='text' id='temp' placeholder='Enter to create review. Esc to discard.' /></label><span><input class='reviewDate' id='reviewDate_"+(parseInt(lastID) + 1)+"' type='text' readonly></span>");
			$(".reviewDate").datepicker(datepickerOpts);

			$list.find("li:first").addClass("active");
			$("#temp").focus();
			isEditing = true;
		});

		var KEYCODE_ENTER = 13;
		var KEYCODE_ESC = 27;
		$(document).on("keyup", function(e) {
			var $temp = $("#temp");

			//user hit enter, temp input exist and is not empty
			if (e.keyCode == KEYCODE_ENTER && $temp[0] && $temp.val().trim() !== "") {
				isEditing = false;
				var tempVal = $("#temp").val();
				var $currentLabel = $temp.parent("label"),
					labelNum = $currentLabel.attr("for").split("_").pop(),
					$reviewChk = $currentLabel.siblings("input[type=checkbox]"),
					$reviewDate = $currentLabel.parent("li").find(".reviewDate");

				if ($reviewDate.val().trim() === "") {
					$reviewDate.siblings("button").click();
					isEditing = true;
					return false;
				}
				$currentLabel.html(tempVal);
				$currentLabel.parent("li").toggleClass("active", $reviewChk.is(":checked"));
				
				//make sure the new input created gets binded
				$reviewChk.on("click", updateItemState);


				$temp.remove();
				$(".toDo .addReview").removeClass("selected");
			}
			if (e.keyCode == KEYCODE_ESC) {
				isEditing = false;
				$temp.closest("li").remove();
				$(".toDo .addReview").removeClass("selected");
			}
		});

		/*Progress Bar functionality*/
		var $progressBar = $(".progressBar");
		$progressBar.each(function() {
			var $progress = $(this).find(".progress"),
				$progressValue = $progress.attr("data-progressValue"),
				$percent = $(this).siblings(".percent");

			if ($progressValue <= 50) {
				$progress.addClass("warning");
				$percent.addClass("warning");
			}
			$progress.css("width", $progressValue+"%");
		});
			

	});	
})(jQuery, this);

$(function(){
  $(".doughnutChart").drawDoughnutChart([
    { title: "Positive", value : 25,  color: "#61c6cf" },
    { title: "Neutral",  value:  25,  color: "#49b8f2" },
    { title: "Negative", value:  80,  color: "#de808f" },
    { title: "Self",     value : 35,  color: "#a08bcd" }
  ]);
});
/*!
 * jquery.drawDoughnutChart.js
 * Version: 0.4.1(Beta)
 * Inspired by Chart.js(http://www.chartjs.org/)
 *
 * Copyright 2014 hiro
 * https://github.com/githiro/drawDoughnutChart
 * Released under the MIT license.
 * 
 */
;(function($, undefined) {
  $.fn.drawDoughnutChart = function(data, options) {
    var $this = this,
      W = $this.width(),
      H = $this.height(),
      centerX = W/2,
      centerY = H/2,
      cos = Math.cos,
      sin = Math.sin,
      PI = Math.PI,
      settings = $.extend({
        segmentShowStroke : true,
        segmentStrokeColor : "#fff",
        segmentStrokeWidth : 4,
        baseColor: "#fff",
        baseOffset: 0,
        edgeOffset : 10,//offset from edge of $this
        percentageInnerCutout : 75,
        animation : true,
        animationSteps : 35,
        animationEasing : "linear",
        animateRotate : true,
        tipOffsetX: -8,
        tipOffsetY: -45,
        tipClass: "doughnutTip",
        summaryClass: "doughnutSummary",
        summaryTitle: "SCORE:",
        summaryTitleClass: "doughnutSummaryTitle",
        summaryNumberClass: "doughnutSummaryNumber",
        beforeDraw: function() {  },
        afterDrawed : function() {  },
        onPathEnter : function(e,data) {  },
        onPathLeave : function(e,data) {  }
      }, options),
      animationOptions = {
        linear : function (t) {
          return t;
        },
        easeInOutExpo: function (t) {
          var v = t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;
          return (v>1) ? 1 : v;
        }
      },
      requestAnimFrame = function() {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
      }();

    settings.beforeDraw.call($this);

    var $svg = $('<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>').appendTo($this),
        $paths = [],
        easingFunction = animationOptions[settings.animationEasing],
        doughnutRadius = Min([H / 2,W / 2]) - settings.edgeOffset,
        cutoutRadius = doughnutRadius * (settings.percentageInnerCutout / 100),
        segmentTotal = 0;

    //Draw base doughnut
    var baseDoughnutRadius = doughnutRadius + settings.baseOffset,
        baseCutoutRadius = cutoutRadius - settings.baseOffset;
    $(document.createElementNS('http://www.w3.org/2000/svg', 'path'))
      .attr({
        "d": getHollowCirclePath(baseDoughnutRadius, baseCutoutRadius),
        "fill": settings.baseColor
      })
      .appendTo($svg);

    //Set up pie segments wrapper
    var $pathGroup = $(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
    $pathGroup.attr({opacity: 0}).appendTo($svg);

    //Set up tooltip
    var $tip = $('<div class="' + settings.tipClass + '" />').appendTo('body').hide(),
        tipW = $tip.width(),
        tipH = $tip.height();

    //Set up center text area
    var summarySize = (cutoutRadius - (doughnutRadius - cutoutRadius)) * 2,
        $summary = $('<div class="' + settings.summaryClass + '" />')
                   .appendTo($this)
                   .css({ 
                     width: summarySize + "px",
                     height: summarySize + "px",
                     "margin-left": -(summarySize / 2) + "px",
                     "margin-top": -(summarySize / 2) + "px"
                   });
    var $summaryTitle = $('<p class="' + settings.summaryTitleClass + '">' + settings.summaryTitle + '</p>').appendTo($summary);
    var $summaryNumber = $('<p class="' + settings.summaryNumberClass + '"></p>').appendTo($summary).css({opacity: 0});

    for (var i = 0, len = data.length; i < len; i++) {
      segmentTotal += data[i].value;
      $paths[i] = $(document.createElementNS('http://www.w3.org/2000/svg', 'path'))
        .attr({
          "stroke-width": settings.segmentStrokeWidth,
          "stroke": settings.segmentStrokeColor,
          "fill": data[i].color,
          "data-order": i
        })
        .appendTo($pathGroup)
        .on("mouseenter", pathMouseEnter)
        .on("mouseleave", pathMouseLeave)
        .on("mousemove", pathMouseMove);

        $(".chart-legend li:eq("+i+") span").css("border", "3px solid "+data[i].color);
    }

    //Animation start
    animationLoop(drawPieSegments);

    //Functions
    function getHollowCirclePath(doughnutRadius, cutoutRadius) {
        //Calculate values for the path.
        //We needn't calculate startRadius, segmentAngle and endRadius, because base doughnut doesn't animate.
        var startRadius = -1.570,// -Math.PI/2
            segmentAngle = 6.2831,// 1 * ((99.9999/100) * (PI*2)),
            endRadius = 4.7131,// startRadius + segmentAngle
            startX = centerX + cos(startRadius) * doughnutRadius,
            startY = centerY + sin(startRadius) * doughnutRadius,
            endX2 = centerX + cos(startRadius) * cutoutRadius,
            endY2 = centerY + sin(startRadius) * cutoutRadius,
            endX = centerX + cos(endRadius) * doughnutRadius,
            endY = centerY + sin(endRadius) * doughnutRadius,
            startX2 = centerX + cos(endRadius) * cutoutRadius,
            startY2 = centerY + sin(endRadius) * cutoutRadius;
        var cmd = [
          'M', startX, startY,
          'A', doughnutRadius, doughnutRadius, 0, 1, 1, endX, endY,//Draw outer circle
          'Z',//Close path
          'M', startX2, startY2,//Move pointer
          'A', cutoutRadius, cutoutRadius, 0, 1, 0, endX2, endY2,//Draw inner circle
          'Z'
        ];
        cmd = cmd.join(' ');
        return cmd;
    };
    function pathMouseEnter(e) {
      var order = $(this).data().order;
      $tip.text(data[order].title + ": " + data[order].value)
          .css("background", data[order].color)
          .fadeIn(200);

      $('#additionalStyles').remove();
      $('head').append('<style id="additionalStyles">.doughnutTip:after{border-top-color: '+data[order].color+';}</style>');        

      settings.onPathEnter.apply($(this),[e,data]);
    }
    function pathMouseLeave(e) {
      $tip.hide();
      settings.onPathLeave.apply($(this),[e,data]);
    }
    function pathMouseMove(e) {
      $tip.css({
        top: e.pageY + settings.tipOffsetY,
        left: e.pageX - $tip.width() / 2 + settings.tipOffsetX
      });
    }
    function drawPieSegments (animationDecimal) {
      var startRadius = -PI / 2,//-90 degree
          rotateAnimation = 1;
      if (settings.animation && settings.animateRotate) rotateAnimation = animationDecimal;//count up between0~1

      drawDoughnutText(animationDecimal, segmentTotal);

      $pathGroup.attr("opacity", animationDecimal);

      //If data have only one value, we draw hollow circle(#1).
      if (data.length === 1 && (4.7122 < (rotateAnimation * ((data[0].value / segmentTotal) * (PI * 2)) + startRadius))) {
        $paths[0].attr("d", getHollowCirclePath(doughnutRadius, cutoutRadius));
        return;
      }
      for (var i = 0, len = data.length; i < len; i++) {
        var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (PI * 2)),
            endRadius = startRadius + segmentAngle,
            largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0,
            startX = centerX + cos(startRadius) * doughnutRadius,
            startY = centerY + sin(startRadius) * doughnutRadius,
            endX2 = centerX + cos(startRadius) * cutoutRadius,
            endY2 = centerY + sin(startRadius) * cutoutRadius,
            endX = centerX + cos(endRadius) * doughnutRadius,
            endY = centerY + sin(endRadius) * doughnutRadius,
            startX2 = centerX + cos(endRadius) * cutoutRadius,
            startY2 = centerY + sin(endRadius) * cutoutRadius;
        var cmd = [
          'M', startX, startY,//Move pointer
          'A', doughnutRadius, doughnutRadius, 0, largeArc, 1, endX, endY,//Draw outer arc path
          'L', startX2, startY2,//Draw line path(this line connects outer and innner arc paths)
          'A', cutoutRadius, cutoutRadius, 0, largeArc, 0, endX2, endY2,//Draw inner arc path
          'Z'//Cloth path
        ];
        $paths[i].attr("d", cmd.join(' '));
        startRadius += segmentAngle;
      }
    }
    function drawDoughnutText(animationDecimal, segmentTotal) {
      $summaryNumber
        .css({opacity: animationDecimal})
        .text("25");
    }
    function animateFrame(cnt, drawData) {
      var easeAdjustedAnimationPercent =(settings.animation)? CapValue(easingFunction(cnt), null, 0) : 1;
      drawData(easeAdjustedAnimationPercent);
    }
    function animationLoop(drawData) {
      var animFrameAmount = (settings.animation)? 1 / CapValue(settings.animationSteps, Number.MAX_VALUE, 1) : 1,
          cnt =(settings.animation)? 0 : 1;
      requestAnimFrame(function() {
          cnt += animFrameAmount;
          animateFrame(cnt, drawData);
          if (cnt <= 1) {
            requestAnimFrame(arguments.callee);
          } else {
            settings.afterDrawed.call($this);
          }
      });
    }
    function Max(arr) {
      return Math.max.apply(null, arr);
    }
    function Min(arr) {
      return Math.min.apply(null, arr);
    }
    function isNumber(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    }
    function CapValue(valueToCap, maxValue, minValue) {
      if (isNumber(maxValue) && valueToCap > maxValue) return maxValue;
      if (isNumber(minValue) && valueToCap < minValue) return minValue;
      return valueToCap;
    }
    return $this;
  };
})(jQuery);

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions