HR-Admin-Web-App-UI-UX

Developer
Kev Rousseau
Size
13,891 Kb
Views
30,360
  1. HR-Admin-Web-App-UI-UX Previews
  2. HR-Admin-Web-App-UI-UX HTML Codes
  3. HR-Admin-Web-App-UI-UX CSS Codes
  4. HR-Admin-Web-App-UI-UX JS Codes

How do I make an hr-admin-web-app-ui-ux?

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 . What is a hr-admin-web-app-ui-ux? How do you make a hr-admin-web-app-ui-ux? This script and codes were developed by Kev Rousseau on 22 July 2022, Friday.

HR-Admin-Web-App-UI-UX Previews
IQ Test

HR-Admin-Web-App-UI-UX - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HR-Admin-Web-App-UI-UX</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

HR-Admin-Web-App-UI-UX - Script Codes CSS Codes

/* http://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 { width: 70%; margin-left: 78px; display: table;
}
#topNav { background-color: #4b6c8b; height: 70px; display: table-cell; position: absolute; right: 0;
}
#topNav ul { height: 100%; display: inline-table; border: 1px solid #334c64; border-right: none;
}
#topNav ul li { float: left; position: relative; width: 78px; height: 67px; 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); position: absolute; margin-left: -30px; margin-top: -1px;
}
.icon-manageGoals:before { content: url(http://i59.tinypic.com/24g6p2s.png); position: absolute; margin-left: -30px; margin-top: -1px;
}
.icon-askFeedback:before { content: url(http://i58.tinypic.com/n5pmy1.png); position: absolute; margin-left: -30px; margin-top: -1px;
}
.icon-setReview:before { content: url(http://i58.tinypic.com/se96yv.png);
}
.icon-setGoal:before { content: url(http://i59.tinypic.com/xp7rdf.png);
}
.icon-setNote:before { content: url(http://i58.tinypic.com/1znwkld.png);
}
.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: 100%; height: 70px; background-color: #3d5b77; display: table-cell;
}
#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;
}

HR-Admin-Web-App-UI-UX - Script Codes JS Codes

;(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);
HR-Admin-Web-App-UI-UX - Script Codes
HR-Admin-Web-App-UI-UX - Script Codes
Home Page Home
Developer Kev Rousseau
Username kevrousso
Uploaded July 22, 2022
Rating 4.5
Size 13,891 Kb
Views 30,360
Do you need developer help for HR-Admin-Web-App-UI-UX?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kev Rousseau (kevrousso) Script Codes
Name
A Pen by Kev Rousseau
Notifications
Fing needle in haystack by splicing array in half
Square animation on scroll
1-Discover-Backpacker
Custom FuzzySearch
CSS Collapse boxes
Invert Page
Find needle in haystack by looping through each item one by one
Event Dispatching example
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!