jodit/src/styles/widgets/progressbar.less

Jodit is awesome and usefully wysiwyg editor with filebrowser

/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Licensed under GNU General Public License version 2 or later or a commercial license or MIT;
 * For GPL see LICENSE-GPL.txt in the project root for license information.
 * For MIT see LICENSE-MIT.txt in the project root for license information.
 * For commercial licenses see https://xdsoft.net/jodit/commercial/
 * Copyright (c) 2013-2019 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

@import (reference) '../variables';
@keyframes pulse {
	30% {
		opacity: 0.6;
	}

	60% {
		opacity: 0;
	}

	to {
		opacity: 0.6;
	}
}

.jodit_progress_bar {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 2px;
	z-index: 2147483647;
	border-radius: 1px;
	display: none;
	div {
		position: relative;
		background: @color-background-progress;
		height: 2px;
		transition: width 500ms ease-out, opacity 500ms linear;
		will-change: width, opacity;
		&:before,
		&:after {
			animation: pulse 2s ease-out 0s infinite;
			content: '';
			display: inline-block;
			position: absolute;
			top: 0;
			height: 2px;
			box-shadow: @color-background-progress 1px 0 6px 1px;
			border-radius: 100%;
			opacity: 0.6;
		}
		&:before {
			width: 180px;
			right: -80px;
			clip: rect(-6px, 90px, 14px, -6px);
		}
		&:after {
			width: 20px;
			right: 0;
			clip: rect(-6px, 22px, 14px, 10px);
		}
	}
}