DHCWEBLOG©
Expansions / Services
Search
My Socials & Connections
Expansions and services are still to be developed, come back another time.
What would the expansions and services be? Expansions will be different websites which are directly linked to my brand and myself. This will eventually include a whole range of websites including subdomains for people to visit and use in the future.
DHCIn this tutorial I am going to show you how to make a simple html and css loading spinner. This tutorial will require basic knowledge in HTML5 and CSS3. There are no additional resources needed for this creation, just follow the code snippets in order and you should be good to go.
In this section you will be adding the HTML element to your HTML document and styling that element into a spin loader.
The type of element would be a <div> which basically is a container. In this case we are going to turn
this into our simple animated loading spinner. Create the element using HTML and by adding the class "spin-loader".
Now it's time to style the <div> to look like a spin loader. In a the CSS file add the code snippet contents.
The main part which will make it look like a spin loader would be the styling of the border. In this example one side from the rest
will be different, i.e royalblue colour. Changing the "border-radius" at a value of 50% will make it a full circle as long as its
width and height are exactly the same.
Lastly, it's time to add the animation part of the spin loader. In this instance it will be put on a infinite loop.
To animate the spin loader we first need to create the animation keyframes. For the spin loader we need to animate it to do
a full circle around in a clockwise direction. Follow the code snippet to help you along to create the keyframes for the
animation. Additionally, we need to add the animation keyframes to the styled spin loader container - copy exactly what's on the
code snippet, specifically the bit under div.spin-loader {
You have successfully created a spin loader for your website using CSS and HTML. At the moment this "loader" does not disappear or appear unless you intergrate your own code for it to be used properly.
