YAAK DEVELOPERS

Photo Source: Internet

Photo Source: Internet

Photo Source: Internet

Photo Source: Internet

CSS Coding for Circular Loader #loader{ margin-left:200px; margin-top:100px; }

Html Coding for Circular Loader <!-- NOTE :- Put Javascript code end of your Html body or after div-id loader. --> <div id="loader"> <canvas id="circularLoader" width="200" height="200"></canvas> </div> <script type="text/javascript"> var ctx = document.getElementById('circularLoader').getContext('2d'); var al = 0; var start = 4.72; var cw = ctx.canvas.width; var ch = ctx.canvas.height; var diff; function progressSim(){ diff = ((al / 100) * Math.PI*2*10).toFixed(2); ctx.clearRect(0, 0, cw, ch); ctx.lineWidth = 17; ctx.fillStyle = '#4285f4'; ctx.strokeStyle = "#4285f4"; ctx.textAlign = "center"; ctx.font="28px monospace"; ctx.fillText(al+'%', cw*.52, ch*.5+5, cw+12); ctx.beginPath(); ctx.arc(100, 100, 75, start, diff/10+start, false); ctx.stroke(); if(al >= 100){ clearTimeout(sim);    // A

CSS Coding for Social Sharing @import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'; body {   background-color:#e5e7e7; } .SocialIcons {   position:absolute;   top:50%;   left:50%;   display: inline-block;   -ms-transform:translate(-50%,-50%);   -webkit-transform:translate(-50%,-50%);   transform:translate(-50%,-50%); } /* Icons */ .SocialIcons a {   color:#fff;   display: inline-block;   width:55px;   height:34px;   padding-top:20px;   margin:0 2px;   border-radius:5px;   text-align:center;   text-decoration:none;   font-family:fontawesome;   position: relative;   -o-transition:all .5s;   -webkit-transition: all .5s;   -moz-transition: all .5s;   transition: all .5s;    -webkit-font-smoothing: antialiased; } .SocialIcons a:hover {   opacity: 0.78; } /* pop-up text */ .SocialIcons a span {   color:#666;   position:absolute;   font-family:sans-serif;   bottom:0;   left:-25px;   right:-25p

Html Coding for Social Sharing <link href='sty.css?family=Droid+Sans' rel='stylesheet' type='text/css'> <div class="SocialIcons">   <a class="facebook" href="#"><span>Facebook</span></a>   <a class="twitter" href="#"><span>Twitter</span></a>   <a class="googleplus" href="#"><span>Google+</span></a>   <a class="github" href="#"><span>Github</span></a> </div>

CSS Coding for Analog Clock .inline-block {   display: -moz-inline-stack;   display: inline-block; } * {   outline: none; } html {   height: 100%; } body {   background: url('http://images.wallpapersmela.com/2014/01/Latest-HD-Technology-Wallpapers-2014.jpg') no-repeat fixed center;   background-size:cover; } body .container {   width: 100%;   max-width: 300px;   margin-right: auto;   margin-left: auto;   font-family: 'helvetica', sans-serif; } .clock {   margin-bottom: 20px;   width: 100%;   padding-bottom: 100%!important;   padding-top: 0!important;   position: relative;   margin-top: 50%;   background-color: #e7e7e7;   -moz-border-radius: 50%;   -o-border-radius: 50%;   -webkit-border-radius: 50%;   border-radius: 50%;   border: 10px solid #333;   opacity:0.97;   -webkit-box-shadow: 1px 10px 50px rgba(0, 0, 0, 0.3), inset 1px 1px 15px rgba(0, 0, 0, 0.4);   -moz-box-shadow: 1px 10px 50px rgba(0, 0, 0, 0.3), inset 1px 1px 15px

Javascript Coding for Analog Clock $(function(){ "use strict"; var Clock = function(options) { $.extend(this, {}, options); this.cache(); this.bind(); return this; }; $.extend(Clock.prototype, { cache: function(){ this.$secArrow = $('.sec-arrow'); this.$secMin = $('.min-arrow'); this.$secHrs = $('.hour-arrow'); }, bind: function(){ this.runTime(); }, setTime: function($el, getTime, deg){ $el.css({'-webkit-transform': 'rotate(' + getTime *deg + 'deg)', '-moz-transform': 'rotate(' + getTime *deg + 'deg)', '-ms-transform': 'rotate(' + getTime *deg + 'deg)', '-o-transform': 'rotate(' + getTime *deg + 'deg)', 'transform': 'rotate(' + getTime *deg + 'deg)' }); }, setSeconds: function(){ var getSec = new Date().getSeconds(); this.setT

Html Coding for Analog Clock <script src=".js"></script> <link href='st.css?family=Droid+Sans' rel='stylesheet' type='text/css'>     <script src="j.js"></script> <div class="container">     <div class="night"></div>     <div class="clock">           <div class="center"></div>       <div class="arrow hour-arrow"></div>       <div class="arrow min-arrow"></div>       <div class="arrow sec-arrow"></div> <ul class="digits">         <li class="digit digit-1">1</li>         <li class="digit digit-2">2</li>         <li class="digit digit-3">3</li>         <li class="digit digit-4">4</li>         <li class="digit digit-5">5</li>