Missing CSS properties for moon-around-light

[kasir-barati]

Hi, And thank you for this amazing work of art.

I tried to use this full moon with a spinning light around it in my code and I realized that you need to add display: inline-block and left: 0 to .loader::before to get it work.

I think you should update these lines here:

css-loader/js/loaders/circle.js

Lines 1800 to 1830 in f51b9ae

	{
	id: "moon-around-light",
	html: `<span class="loader"></span>`,
	css: `.loader {
	width: 100px;
	height: 100px;
	background: linear-gradient(
	165deg,
	rgba(255, 255, 255, 1) 0%,
	rgb(220, 220, 220) 40%,
	rgb(170, 170, 170) 98%,
	rgb(10, 10, 10) 100%
	);
	border-radius: 50%;
	position: relative;
	}
	.loader:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border-bottom: 0 solid #ffffff05;
	box-shadow: 0 -10px 20px 20px #ffffff40 inset,
	0 -5px 15px 10px #ffffff50 inset, 0 -2px 5px #ffffff80 inset,
	0 -3px 2px #ffffffbb inset, 0 2px 0px #ffffff, 0 2px 3px #ffffff,
	0 5px 5px #ffffff90, 0 10px 15px #ffffff60, 0 10px 20px 20px #ffffff40;
	filter: blur(3px);
	animation: 2s rotate linear infinite;
	}

BTW I really think it is time to do a revision, things like the following were added for quite some time:

• CSS logical properties
• CSS nesting.
• And :before were changed to ::before (ref).

[kasir-barati]

Since I raised the topic I guess I do not mind helping you out refactoring it.

Note

I am not saying to remove css declarations such as width entirely but I guess we can at least use the logical properties alongside physical, direction and dimension mappings. Maybe in a year or two we just could then get rid of them entirely.

[kasir-barati]

Same here:

css-loader/js/loaders/circle.js

Lines 2719 to 2767 in f51b9ae

	id: "bbClrTLin",
	html: `<span class="loader"></span>`,
	css: `.loader {
	position: relative;
	width: 100px;
	height: 100px;
	}
	.loader:before{
	content: '';
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	top: 50%;
	left: 0;
	transform: translate(-5px, -50%);
	background: linear-gradient(to right, #fff 50%, #de3500 50%) no-repeat;
	background-size: 200% auto;
	background-position: 100% 0;
	animation: colorBallMoveX 1.5s linear infinite alternate;
	}
	.loader:after{
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 2px;
	height: 100%;
	background: #de3500;
	}
	@keyframes colorBallMoveX {
	0% {
	background-position: 0% 0;
	transform: translate(-15px, -50%);
	}
	15% , 25% {
	background-position: 0% 0;
	transform: translate(0px, -50%);
	}
	75% , 85% {
	background-position: 100% 0;
	transform: translate(50px, -50%);
	}
	100% {
	background-position: 100% 0;
	transform: translate(65px, -50%);
	}
	}

You need to add display: inline-block to your .loader class