Create a Speech Bubble DIV with CSS

Create a popup that looks like a speech bubble.

Create a bubble like this:

Downloading data...

If wanting to add box-shadow then remove the #bubble div:after {} section at the same time because there is no way to add a shadow that follows all the lines (unless a hard-edged shadow is acceptable), and this will make the arrow look as though it is in the shadow of the box.

Use JavaScript document.getElementById("bubble").offsetHeight to determine the bubble's height in order to position it properly.

<!DOCTYPE html>
<html>
<head>
	<title>bubble</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #fff;
		}
		#bubble {
			position: relative; /* this can be absolute or fixed if need be */
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 150px;
			padding: 15px;
			z-index: 10;
		}
			#bubble::before {
				content: "";
				position: absolute;
				border-style: solid;
				border-color: #ccc transparent transparent transparent;
				border-width: 10px 15px 0 1px;
				left: 15px;
				bottom: -10px;
			}
			#bubble::after {
				content: "";
				position: absolute;
				border-style: solid;
				border-color: #fff transparent transparent transparent;
				border-width: 9px 14px 0 0;
				left: 16px;
				bottom: -9px;
			}
	</style>
</head>
<body>
	<div id="bubble">Downloading data...</div>
</body>
</html>