How to Create Simple HTML5 / CSS3 Preloader Animation | Circular Spinner Preloader - Youtube

How to Create Simple HTML5 / CSS3 Preloader Animation | Circular Spinner Preloader

Creating a pure css3 preloader, which looks like a circular animated spinner screen is quite simple, we use simple css3 @keyframes property and border properties to create this nice css preloader effect. This is also known as a html document loading screen animation which is very simple and effective to enhance the user experience by using the simple yet powerful css3 properties to create this circular animated css3 spinner.

Navigate to specific portion of css3 preloader video, just click on timestamp-

1:09 Creating html markup for the loading spinner
1:30 Writing CSS styles for the preloader
2:06 Centering the preloader into viewport
3:29 Creating the preloader animation using css3 keyframes
4:22 Applying animation to spinner class using css3 animation property

*********************DOWNLOAD SOURCE CODE*****************

****************************************************************

^**IMPORTANT

This video is only going to help you to create the html5 and css3 preloader without using gif files, purely based on css3 animation @keyframes properties.
If you want to ADD css preloader into your website then please watch this video in which I have taught how to add loading screen animation effect using javascript into your html website.

Have any questions, just comment below in comment section. I will try to respond as soon as possible.

Like share and comment!
Thanks

================Links to other playlists===============

- HTML5 Fundamental Video Tutorials 2016 Playlist

- Three ways to create responsive equal height columns using CSS

- How to create a header navigation with centered logo

- Creating Responsive Image Gallery using pure css3

============Awesome Videos on CSS3=============

Creating CSS3 Tooltip without using jquery or javascript

Styling placeholder text using css3

Creating three column responsive layout

================================================
************************CONTACT and RESOURCES*************
Find all the source codes here:

Follow on Twitter

Add on Facebook

Like Page on Facebook

Share this video and Subscribe to this channel for latest updates and web design tips and techniques.

[smashtheshell]

Thanks for your support. Don't forget to like comment and subscribe. 🙏

[rohitnikalje]

wow ... I thought it would be hard .. you explained it in very simple way .. I am web developer too and subscribing to your channel just learn more of these . Good work and keep the same rappo. Thanks a lot .

[muffinproject]

Using a box with rounded corners is a great little hack. Not useful for what I currently want but I'll keep it in mind for future use.

[codinginjs]

awesome way of explaining I hope u will upload more and more v ideos...

[herbertbuhlmann]

I'm a noob, thanks for showing me.

[klima]

ok ok !. . . eu ainda não vi no youtube, alguém fazer o progress bar em ação, ou seja, abre o progress bar (animação), e depois a pagina index.html, abre logo após a animação do progress, .... eu agradeço essa vídeo aula...não só ver o código mas estudar esses procedimentos, beleza!

[md.shohanurrezabadhon]

Hey there, thanks for this video but Um having a problem with "Uncaught ReferenceError: overlay is not defined
at preloader.js:4". The forth line is "overlay.style.display = 'none';"

Can you tell me what should I do?

[klima]

meu erro foi no index.html

<link rel="stylesheet" href="rel="stylesheet" href="main.css">

repetido : href="rel="stylesheet"

Resolvido !

[blatentxyz]

cool video, how to make that work with an adobe animate file.
I got quite heavy file to load, so right now i have a white screen with the standard adobe animate preloader gif. which really is nothing more than an image in the screen.

what i wanted to do was make yeah, lets say i use your pre loader coding, great. what would be really cool is if I could add a " percentage of the load in porgress aka, 0%, 5%, 25 % until boom we hit 99% and load page boom.

I would need the load " % / percentage " to be cifrectly connected to the " real load time " of the media in the que .

any help would be greatly valued, thank you in advance all herein. smiles.

i thinking BTW, once i publish the animate doc as html5 canvass, i got the html generated, then go in there and add code to that right, to pull the load time and display as a percentage, the graphic is not so important, it is critical that the user sees on page load / rather " wait " for page to load what indication in load " time this will take " via showing a percentage to them, so hey they know that this thing is after 5 minutes only for example on 39 % .
but hey they see it moving and that is what matters, they see the " progress " .

thankx once again great channel.

[sandokansasho]

please chanhe your pronocation teacher man ?