Technology
Posts
CSS Coding for Circular Loader
CSS Coding for Circular Loader #loader{ margin-left:200px; margin-top:100px; }
Html Coding for Circular Loader
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
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 */ .Socia...
Html Coding for Social Sharing
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
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), ins...
Javascript Coding for Analog Clock
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
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 dig...
