Create a ring spinner that can be used to indicate content loading.
HTML CODE:
<div class="donut">
</div>
CSS CODE:
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
Description
Use translucent border For the entire element, except for the side that is used as the ring loading indicator. Use a animation rotation element.
Post your comments / questions
Recent Article
- How to programmatically modifying the AppSetting value in web.config using c#?
- TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
- How to calculate the age from jQuery ui datepicker using c#?
- How to calculate days difference between two dates in c#?
- Changing date format in jQuery ui datepicker
- How to set value to nicedit textarea using jQuery?
- How to load data from json file in angular?
- cannot find module consider using '--resolvejsonmodule' to import module with json extension angular
Related Article