css loader

css-loader.markdown

css loader

A Pen by Abdus Samad Azad on CodePen.

License.

index.html

<div id="wrapper">
	<div id="circle"></div>
	<div id="text">Watching TV</div>
</div>

script.js

const text__div = document.querySelector("#text");
const randomPhrase = [
	"Playing Fortnite",
	"Writing JavaScript",
	"Serving Dinner",
	"Turning Server On",
	"Watching TV"
];

setInterval(
	() =>
		(text__div.textContent =
			randomPhrase[Math.floor(Math.random() * randomPhrase.length + 0)]),
	2000
);

style.scss

@keyframes spin {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes blink {
	0% {
		opacity: .3;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: .3;
	}
}

body {
	margin: 0;
}

#wrapper {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	& #circle {
		padding: 0.5rem;
		background: rgb(242, 52, 4);
		background: linear-gradient(
			90deg,
			rgba(242, 52, 4, 1) 0%,
			rgba(235, 104, 69, 1) 16%,
			rgba(219, 235, 233, 1) 35%
		);
		border-radius: 50%;
		transform: rotate(-90deg);
		animation: spin .8s linear infinite;

		&::after {
			display: block;
			content: " ";
			padding: 2rem;
			border-radius: 50%;
			background: #fff;
		}
	}
	
	& #text {
		margin-top: 1rem;
		font-family: 'Poppins';
		color: orangered;
		text-transform: lowercase;
		animation: blink .8s linear infinite;
	}
}