Round Loading Animation in CSS

I spent hours scouring the internet for a solution on how to create basic CSS circle shape loaders, but couldn't find anything straightforward. I am working on a special website project that requires displaying survey results in dynamic percentages that I can easily control.

The closest option I came across was this:
http://tympanus.net/Tutorials/CircularProgressButton/
However, I don't need any animations. I simply need a customizable shape for each survey result and the ability to adjust the percentages easily with CSS (width: 55%, etc.).

Here is the graphic I'm currently using:

I need everything to be as simple as possible so I can also customize the colors easily. Does anyone have any ideas on how I can achieve this?

Thank you!

cssanimationshapescss-shapes

Answer №1

Give it a try by utilizing the svg element along with the strokeoffset. Simply click on the center and input a value.

$('input').keyup(function(){
    var val = $(this).val()
    val = parseInt(val);
    $('.path').css('stroke-dashoffset', (val * -315 / 100))
})
.path {
    fill: none;
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
    transition: 0.5s all;
}


input{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position:absolute;
    margin-left: 170px;
    margin-top: 70px;
    font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" maxlength="3"/>
<svg width="1100" height="800"> 
  <circle cx="200" cy="100" r="50" stroke-width="50" stroke="cornflowerblue" fill="none"/>
    <circle cx="200" cy="100" r="50" stroke-width="50" stroke="black" class="path"/>
</svg>

Answer №2

If you're looking for a CSS solution, another option to consider is the jQuery Knob framework available at . It offers an easy-to-use approach to addressing the specific problem you're facing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving information from the table based on the user currently logged in

I have a scenario with two different tables, NGO and Volunteer. When a volunteer selects an NGO to work with, I want to display only those volunteers who are interested in the current logged-in NGO. Below is the code snippet I am using: [<?php ...

phphtmlcssmysqlmaterialize

Error message: IndexError: list index out of range while attempting to trigger a click event using selenium

There are a total of 41 category checkboxes on the page, with only 12 initially visible while the rest are hidden. To reveal the hidden checkboxes, one must click on "show more." This simple code accomplishes that: [step 1] Loop through all checkboxes >> ...

pythoncssseleniumweb-scrapingscrapy

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

webkitcss

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

cssflexboxcentering

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

First and foremost, I apologize for the awkwardly phrased question. The issue at hand is that when the tags exceed the container size, the search option becomes hidden. My goal is to have the search bar adjust dynamically, moving everything back inside the ...

jqueryhtmlcss

Trouble with applying position absolute to pseudo element in Firefox version 12 and higher

I seem to be running into an issue with the positioning of a pseudo element in Firefox version 12 or higher (possibly even earlier versions). Despite having position:relative on the anchor tag, the element appears to be relative to the entire page. Any ide ...

htmlcssfirefox

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

javascriptcssreactjsbootstrap-4material-ui

css The issue of ul and ol elements not inheriting the padding property

https://codepen.io/unique-user123/pen/abcDeFG Why is it necessary to utilize the ul, ol, and li selectors in order to remove the default 40px left padding and 16px top and bottom margin? Can't we simply use the body selector to achieve this? <hea ...

htmlcssinheritancehtml-lists

The jquery datepicker is malfunctioning after switching to another component

My current setup includes the following versions: jQuery: 3.3.1 jQuery UI: 1.12.1 AngularJS: 6 Here's a snippet of my code: <input id="test" type="text" class="form-control" value=""> In my component (component.t ...

javascriptjqueryhtmlcssangularjs

Can a Django form be configured to hide submitted values using display:none?

As I was working on submitting a form in Django with multiple details, I came up with the idea to split it into sections. The first set of details would be hidden initially, and upon clicking the next button, the next set of details would be displayed fo ...

htmlcssdjango

How can I make an image disappear after animation with CSS?

I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...

htmlcssfadeout

Achieving a frosted glass effect for your background without relying on a background image

I am currently working on creating a modal window in React with a blurred backdrop. My goal is to blur the backdrop content while keeping the background image clear, as there is no image behind the modal window, just content. I have explored various soluti ...

htmlcssreactjssass

The CSS file cannot be found on the live XAMPP server

Here is the current structure of my project: I attempted to link my CSS stylesheet by navigating to the project path, then /css, and finally /style.css. This setup works correctly when opening the .html file locally in a browser. <link rel="style ...

phphtmlcssxampphref

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

htmlcsstablesorter

Obscure silhouette enveloping the text enclosure

I'm a beginner in CSS and I need to create a text box like this: My supervisor asked for a shadow effect around the box when clicked. How can I accomplish this? Any assistance would be greatly appreciated. ...

htmlcss

Borders in my CSS/HTML table design

Hey, I'm currently facing an issue with my class project. I've created a table with a series of images to form a background image. However, there are borders on the table that I need to adjust. Here is the current look: I am trying to have a sq ...

htmlcss

Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...

javascriptjquerycssjquery-ui

Tips on wrapping div elements while maintaining equal width in different screen sizes using @media queries

Does anyone have a solution for wrapping divs using @media screen while maintaining equal width on all divs? I've tried using float and inline-block, but can't seem to achieve consistent justified widths. While table-cells maintain equal field wi ...

css

Issues arise with the functionalities of FireFox related to transformations and transitions

I've been working on my CSS and here is what I have: img.buttonImg { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: ...

cssfirefox

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

javascripthtmlcssangularscroll