Button with animated timer

Developer
Michael E Conroy
Size
2,931 Kb
Views
52,624
  1. Button with animated timer Previews
  2. Button with animated timer HTML Codes
  3. Button with animated timer CSS Codes
  4. Button with animated timer JS Codes

How do I make an button with animated timer?

What is a button with animated timer? How do you make a button with animated timer? This script and codes were developed by Michael E Conroy on 03 July 2022, Sunday.

Button with animated timer Previews
IQ Test

Button with animated timer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button with animated timer</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <br>
<div class='container' ng-app='AnimBtnTest' ng-controller='btnTest'> <div class='row'> <div class='col-md-12'> <div class='btn btn-primary animate-width animate-width-start' id='mybtn' ng-click='expand($event)'> <div class='fade' ng-if='show'> {{timer}} <span class='fa fa-circle-o-notch fa-spin'></span> </div> <div class='btn-text'>{{btnText}}</div> </div> </div> </div>
</div> <script src='https://code.angularjs.org/1.3.14/angular.min.js'></script>
<script src='https://code.angularjs.org/1.3.14/angular-animate.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Button with animated timer - Script Codes CSS Codes

.animate-width { -webkit-transition: width 1s; width: 80px; transition: width 1s; overflow: hidden;
}
.animate-width-end { width: 140px !important;
}
.animate-width div { display: inline;
}
.btn-text { float: right; opacity: 1; transition: opacity 1s ease-out; -webkit-transition: opacity 1s ease-out;
}
.animate-width-end .btn-text { opacity: .5;
}
.fade { opacity: 1;
}
.fade.ng-enter { -webkit-transition: opacity .5s ease-in; trransition: opacity .5s ease-in; opacity: 0;
}
.fade.ng-enter.ng-enter-active { opacity: 1;
}

Button with animated timer - Script Codes JS Codes

angular.module('AnimBtnTest',['ngAnimate'])
.factory('timerSrvc',function(){	var _t = undefined; return { start : function(){ _t = Date.now(); }, get : function(){ if(angular.isUndefined(_t)){ _t = Date.now(); return '00:00'; }else{ var _now = Date.now(); // total seconds var _diff = (_now - _t) / 1000; // minutes var _m = Math.floor(_diff / 60); _m = (_m<10) ? '0' + _m.toString() : _m.toString(); var _s = Math.floor(_diff % 60); _s = (_s<10) ? '0' + _s.toString() : _s.toString(); return _m + ':' + _s; } }, stop : function(){ _t = undefined; } };
}) .controller('btnTest',function($scope,$animate,$interval,$timeout,timerSrvc){	var _pause = 1 * 1000;	var _timerStop = undefined;	$scope.btnText = 'Click Me';	$scope.timer = '00:00';	$scope.show = false;	$scope.expand = function expand(evt){ // expand the button's size var _el = angular.element(evt.currentTarget); _el.addClass('animate-width-end'); // show the timer and working icon $timeout(function(){ $scope.show = true; // start timer timerSrvc.start(); _timerStop = $interval(function(){ $scope.timer = timerSrvc.get(); },1000); // stop timer - normally would be doing something here instead of just a $timeout $timeout(function(){ $interval.cancel(_timerStop); timerSrvc.stop(); $scope.show = false; $timeout(function(){	_el.removeClass('animate-width-end'); },500); },3000); },_pause); }; // end expand	});
Button with animated timer - Script Codes
Button with animated timer - Script Codes
Home Page Home
Developer Michael E Conroy
Username m-e-conroy
Uploaded July 03, 2022
Rating 3
Size 2,931 Kb
Views 52,624
Do you need developer help for Button with animated timer?

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!

Michael E Conroy (m-e-conroy) Script Codes
Name
Sass Bourbon Tests
AngularJS Datalist Directive
Dragging in AngularJS
AngularJS BootStrap 3 Modal Dialogs
Course Layout in Angular Material
Edit User Details in Dialog
AngularJS Dialog Service, with i18n
NgRepeat with Controller As Test
Testing CSS Animations
AngularJS Draggable Directive
Create amazing Facebook ads 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!