CSS loading spinners

Developer
Ludvig Lindblom
Size
2,163 Kb
Views
64,768
  1. CSS loading spinners Previews
  2. CSS loading spinners HTML Codes
  3. CSS loading spinners CSS Codes

How do I make an css loading spinners?

What is a css loading spinners? How do you make a css loading spinners? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.

CSS loading spinners Previews
IQ Test

CSS loading spinners - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS loading spinners</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { font-size: 62.5%; background: #333;
}
.loading { animation: spin 1s linear infinite;
}
.loading.one,
.loading.two { border-radius: 50%; content: ""; margin: 4em auto 0 auto;
}
.loading.one { width: 0; height: 0; border: solid 4em; border-color: transparent transparent #f55 transparent;
}
.loading.two { width: 3em; height: 3em; border: solid 2.5em; border-color: #f55 transparent #f55 transparent;
}
.loading.three,
.loading.four{ width: 7em; height: 7em; margin: 4em auto 0 auto; border-radius: 50%; border-left: solid 1em #f55; border-top: solid 1em transparent;
}
.loading.four { border-left-style: dotted;
}
@keyframes spin { to { transform: rotate(1turn); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="loading one"></div>
<div class="loading two"></div>
<div class="loading three"></div>
<div class="loading four"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS loading spinners - Script Codes CSS Codes

html { font-size: 62.5%; background: #333;
}
.loading { animation: spin 1s linear infinite;
}
.loading.one,
.loading.two { border-radius: 50%; content: ""; margin: 4em auto 0 auto;
}
.loading.one { width: 0; height: 0; border: solid 4em; border-color: transparent transparent #f55 transparent;
}
.loading.two { width: 3em; height: 3em; border: solid 2.5em; border-color: #f55 transparent #f55 transparent;
}
.loading.three,
.loading.four{ width: 7em; height: 7em; margin: 4em auto 0 auto; border-radius: 50%; border-left: solid 1em #f55; border-top: solid 1em transparent;
}
.loading.four { border-left-style: dotted;
}
@keyframes spin { to { transform: rotate(1turn); }
}
CSS loading spinners - Script Codes
CSS loading spinners - Script Codes
Home Page Home
Developer Ludvig Lindblom
Username ludviglindblom
Uploaded July 25, 2022
Rating 3
Size 2,163 Kb
Views 64,768
Do you need developer help for CSS loading spinners?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ludvig Lindblom (ludviglindblom) Script Codes
Name
I Am Left logo as a scalable canvas
Circle star
Css arrows and pies
Canvas pie chart with CSS bar chart fallback
Christmas ornaments
Rainy days
Disable JavaScript execution from console
Christmas Tree
Canvas animation
CSS optical illusion
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!