rectangle stroke "set and done" indicator

In this example below you will see how to do a rectangle stroke "set and done" indicator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jason_, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jason_ ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>rectangle stroke "set and done" indicator</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg width="300" height="200" version="1.1">

	<rect id="rect" x="50" y="50" width="140" height="60"/>
	
	<foreignObject width="100" height="50" x="25" y="15">
      <!-- XHTML content goes here -->
      
        <input  xmlns="http://www.w3.org/1999/xhtml"></div>
      
    </foreignObject>
	
</svg>

<div><button id="reset">reset</butotn></div>
<button id="expand">expand</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Jason_/rectangle-stroke-andquotset-and-doneandquot-indicator-dOZYjZ */
svg {
  border: solid 1px #f00;
}
svg rect {
  fill: #A5C663;
  stroke: #567714;
  stroke-width: 10px;
  stroke-dasharray: 200%;
  stroke-dashoffset: 30%;
  cursor: pointer;
}

div {
  width: 300px;
  height: 300px;
}
div p {
  display: inline-block;
  margin-left: 120px;
}
div p:last-child {
  margin-left: 20px;
}


/*Downloaded from https://www.codeseek.co/Jason_/rectangle-stroke-andquotset-and-doneandquot-indicator-dOZYjZ */

"use strict";

var circle = document.querySelector('#rect');
var button = document.querySelector('#button');
var reset = document.querySelector('#reset');
var expand = document.querySelector('#expand');
var svg = document.querySelector('svg');

var k = 200;
var maxOffSet = 30;
var stopCountDown = false;

function setStrokeLength(x) {
	circle.style['stroke-dashoffset'] = x + '%';
}

function drawMoreStroke() {
	setStrokeLength(k);
	k -= 5;
}

function autoRunStroke() {

	if (stopCountDown !== true) {
		if (k >= maxOffSet) {
			drawMoreStroke();
			window.requestAnimationFrame(autoRunStroke);
		} else {
			k = maxOffSet;
			drawMoreStroke();
			newValueSet();
		}
	} else {
		k = 200;
		drawMoreStroke();

		stopCountDown = false;
	}
}

function newValueSet() {
	circle.style['fill'] = '#E8980C';
	circle.style['stroke-dashoffset'] = '200%';
}

function setStopCountDown() {
	stopCountDown = true;
}

function resetCircle() {
	circle.style['stroke-dashoffset'] = '200%';
	circle.style['fill'] = '#A5C663';
	stopCountDown = false;
	k = 170;
}

reset.addEventListener('click', resetCircle, true);
circle.addEventListener('mousedown', autoRunStroke, true);
circle.addEventListener('mouseup', setStopCountDown, true);

expand.addEventListener('click', function () {
	var height = svg.getAttribute('height');
	svg.setAttribute('height', height * 1.5);
}, true);

Comments