 					boxShadow: "0 3px 10px 0 rgba(0, 0, 0, 1)"
 				Dom.div !->
 					Dom.style
-						height: "20px"
+						height: "25px"
 						backgroundColor: nextColor
 						zIndex: "10"
+						_borderRadius: '12.5px'
+						padding: '0 13px 0 13px'
+						marginLeft: '-13px'
 					Dom._get().style.width = dbPercentage + "%"
 					log "dbPercentage after balancing = ", dbPercentage
 					Dom._get().style.transition = "width " + time + "ms linear"
 					window.progressElement = Dom._get()
-					blabla = () -> window.progressElement.style.width = nextPercentage + "%"
-					window.setTimeout(blabla, 10)
-					
-
-
+					timer = () -> window.progressElement.style.width = nextPercentage + "%"
+					window.setTimeout(timer, 10)
+				Dom.div !->
+					Dom.text barText
+					Dom.style
+						width: '100%'
+						color: 'white'
+						marginTop: '-22px'
+						textAlign: 'center'
+						fontSize: '15px'
+						_textShadow: '0 0 5px #000000, 0 0 5px #000000' # Double for extra visibility
 
 # Home page with map
 mainContent = ->

				Dom.text Db.shared.get( 'game', 'teams', teamId, 'teamScore') + " points"
			Dom.cls 'bar-button'
			Dom.style ->
				backgroundColor: Db.shared.get('colors', teamId, 'hex')

addProgressBar = ->
	Db.shared.observeEach 'game', 'beacons', (beacon) !->
		if beacon.get('inRange', Plugin.userId())?	
			dbPercentage = beacon.get("percentage")
			nextPercentage = -1
			nextColor = ""
			action = beacon.get('action')	
			if action == "capture"
				nextPercentage=100
				dbPercentage += (new Date() /1000 -beacon.get("actionStarted"))/30 * 100
				dbPercentage -= 9.8
				log "actionStarted = " + beacon.get("actionStarted")
				if dbPercentage > 100
					dbPercentage = 100
				nextColor = Db.shared.get('colors', Db.shared.get('game', 'beacons', beacon.n, 'nextOwner'), 'hex')
			else if action == "neutralize"
				nextPercentage=0
				dbPercentage -= (new Date() /1000 -beacon.get("actionStarted"))/30 * 100
				if dbPercentage < 0
					dbPercentage = 0
				nextColor = Db.shared.get('colors', Db.shared.get('game', 'beacons', beacon.n, 'owner'), 'hex')
			else
				nextPercentage = dbPercentage
				if beacon.get("owner")==-1
					nextColor = Db.shared.get('colors', Db.shared.get('game', 'beacons', beacon.n, 'nextOwner'), 'hex')
				else
					nextColor = Db.shared.get('colors', Db.shared.get('game', 'beacons', beacon.n, 'owner'), 'hex')
			time = 0

			if nextPercentage != dbPercentage

					if capture.get('type') is "capture" and mapReady()
						beaconId = capture.get('beacon')
						teamId = capture.get('conqueror')
						teamColor = Db.shared.peek('colors', teamId, 'hex')
						teamName = Db.shared.peek('colors', teamId, 'name')
						log "print capture: teamId; " + teamId
						Dom.onTap !->
							Page.nav 'main'
