Checkmark animation in vue. Keywords: checkmark vtick tick v-tick vue vuejs

Checkmark.vue

<template>
	<div :id="id" class="circle-loader" :class="style.class" :style="style.theme">
		<div class="circle-filler" v-if="!style.class.outline"></div>
		<div class="draw" :class="style.checkmark.class"></div>
	</div>
</template>

<script>
	/**
	 * <checkmark :status="pending" :options="{ 'color':{ 'primary': 'blue', 'danger':'red' } }"></checkmark>
	 * 
	 * @props	{String}	status					Valid values: 'pending' (default), 'done', 'failed'
	 * @props	{String}	options.color.primary	CSS color. Default is '--primary'
	 * @props	{String}	options.color.secondary	CSS color. Default is '--secondary'
	 * @props	{String}	options.color.danger	CSS color. Default is '--danger'
	 * @props	{Boolean}	options.outline			Defines whether the checkmark is filled ('outline' false) with the 
	 *        										primary color or outlined ('outline' true).	The default is false.
	 * 			
	 */
	import { computed } from '@vue/composition-api'

	export default {
		name: 'checkmark',
		props: ['status', 'options'],
		setup(props) {
			const id = Math.random().toString(36).substr(2, 9)
			const style = computed(() => {
				const theme = {
					'--secondary': '#d6d6d6'
				}
				const options = props.options || {}
				const { primary, secondary, danger } = options.color || {}
				const { outline } = options

				if (primary)
					theme['--primary'] = primary
				if (danger)
					theme['--danger'] = danger
				if (secondary)
					theme['--secondary'] = secondary

				const isFailed = props.status == 'failed'
				const isCompleted = props.status == 'done' || isFailed

				return {
					theme,
					class: {
						'load-complete': isCompleted,
						failed: isFailed,
						outline 
					},
					checkmark: {
						class: {
							done: isCompleted,
							checkmark: !isFailed,
							cross: isFailed
						}
					}
				}
			})

			return {
				id,
				style
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	$loader-size: 7em;
	$check-height: $loader-size/2;
	$check-width: $check-height/2;
	$check-left: ($loader-size/6 + $loader-size/12);
	$check-thickness: 3px;
	$load-complete-background: 150ms;

	.circle-loader {
		margin-bottom: $loader-size/2;
		border: 3px solid var(--secondary);
		border-left-color: var(--primary);
		animation: loader-spin 1.2s infinite linear;
		position: relative;
		display: inline-block;
		vertical-align: top;
		border-radius: 50%;
		width: $loader-size;
		height: $loader-size;

		&.failed {
			border-left-color: var(--danger);
			.circle-filler {
				background: var(--danger) !important;
			}
		}

		.circle-filler {
			width: 100%;
			height: 100%;
			background: var(--primary);
			border-radius: 200px;
			transform: scale(0);
			-webkit-transition: transform $load-complete-background ease-out;
			-moz-transition: transform $load-complete-background ease-out;
			-ms-transition: transform $load-complete-background ease-out;
			-o-transition: transform $load-complete-background ease-out;
			transition: transform $load-complete-background ease-out;
		}
	}

	.load-complete {
		-webkit-animation: none;
		animation: none;
		border-color: var(--primary);
		-webkit-transition: border 500ms ease-out;
		-moz-transition: border 500ms ease-out;
		-ms-transition: border 500ms ease-out;
		-o-transition: border 500ms ease-out;
		transition: border 500ms ease-out;
		
		&.failed {
			border-color: var(--danger);
		}

		&:not(.outline) {
			background: var(--primary);
			-webkit-transition: background 10ms $load-complete-background ease;
			-moz-transition: background 10ms $load-complete-background ease;
			-ms-transition: background 10ms $load-complete-background ease;
			-o-transition: background 10ms $load-complete-background ease;
			transition: background 10ms $load-complete-background ease;

			.circle-filler {
				transform: scale(1);
			}

			&.failed {
				background: var(--danger);
			}
		}
	}

	.checkmark {
		display: none;

		&.done {
			display: block !important;			
		}
		
		&.draw:after {
			animation-duration: 800ms;
			animation-timing-function: ease;
			animation-name: checkmark;
			transform: scaleX(-1) rotate(135deg);
		}
		
		&:after {
			opacity: 1;
			height: $check-height;
			width: $check-width;
			transform-origin: left top;
			border-right: $check-thickness solid var(--on-primary);
			border-top: $check-thickness solid var(--on-primary);
			content: '';
			left: $check-left;
			top: $check-height;
			position: absolute;
		}

		.outline & {
			&:after {
				border-right: $check-thickness solid var(--primary);
				border-top: $check-thickness solid var(--primary);
			}
		}
	}

	.cross {
		display: none;

		&.done {
			display: block !important;			
		}
		
		&.draw:after {
			animation-duration: 800ms;
			animation-timing-function: ease;
			animation-name: checkmark;
			transform: scaleX(-1) rotate(135deg);
		}

		&.draw:before {
			animation-duration: 800ms;
			animation-timing-function: ease;
			animation-name: checkmark;
			transform: scaleX(-1) rotate(45deg);
		}
		
		&:after {
			opacity: 1;
			height: $check-height;
			width: $check-width;
			transform-origin: left top;
			border-right: $check-thickness solid var(--on-primary);
			content: '';
			left: 0.78em;
			top: 3.4em;
			position: absolute;
		}

		&:before {
			opacity: 1;
			height: $check-height;
			width: $check-width;
			transform-origin: left top;
			border-right: $check-thickness solid var(--on-primary);
			content: '';
			left: 3.3em;
			top: 1em;
			position: absolute;
		}

		.outline & {
			&:after {
				border-right: $check-thickness solid var(--danger);
			}
			
			&:before {
				border-right: $check-thickness solid var(--danger);
			}
		}
	}

	@keyframes loader-spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes checkmark {
		0% {
			height: 0;
			width: 0;
			opacity: 1;
		}
		20% {
			height: 0;
			width: $check-width;
			opacity: 1;
		}
		40% {
			height: $check-height;
			width: $check-width;
			opacity: 1;
		}
		100% {
			height: $check-height;
			width: $check-width;
			opacity: 1;
		}
	}
</style>