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:


 {
    : (220 220 220 / 50%);
      {
    : 1;
}



 {
	: ;
	 (5: 50%;
	: 50%;
	: ;
	: (-50%,-50%);
}

: (0, 0, 0, 0);
		:  0 0 (0, 0, 0, 0),  0 0 (0, 0, 0, 0);
	}
	40% {
		: ;
		:  0 0 (0, 0, 0, 0),  0 0 (0, 0, 0, 0);
	}
	60% {
		:  0 0 ,  0 0 (0, 0, 0, 0);
	}
	80%,
	100% {
		:  0 0 ,  0 0 ;
	}
}

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