About
Portfolio
Blog
Contact

Adding a loading spinner while videos load in Oxygen Builder

When you have a page full of Youtube videos, they will take a while to load and leave an empty space. To offer a better experience to your visitors, let's create a spinner (loading dots in this case) that will show if the video hasn't loaded yet and also give it a background color to make it clear that there will be something in that space.

Copy the code below and paste it into a Stylesheet inside Oxygen. It will automatically work for all videos added with Oxygen video module:

/* Spinner while video loads */
.ct-video {
    background-color: rgb(220 220 220 / 50%);
    position: relative;
}
.ct-video .oxygen-vsb-responsive-video-wrapper {
    z-index: 1;
}

/* loading dots */

.ct-video:after {
	content: " .";
	animation: dots 1s steps(5, end) infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 50px;
	transform: translate(-50%,-50%);
}

@keyframes dots {
	0%,
	20% {
		color: rgba(0, 0, 0, 0);
		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
	}
	40% {
		color: #373a3c;
		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
	}
	60% {
		text-shadow: 0.25em 0 0 #373a3c, 0.5em 0 0 rgba(0, 0, 0, 0);
	}
	80%,
	100% {
		text-shadow: 0.25em 0 0 #373a3c, 0.5em 0 0 #373a3c;
	}
}

Result:

Subscribe
Notify of
guest

0 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
homeenvelopeuserphone-handsetlaptop-phonetext-align-center
en_US
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram