I'm looking to make an animated effect using CSS and HTML (and possibly JavaScript). However, I'm a bit uncertain about how to go about it.
https://i.sstatic.net/zpFPm.png
My goal is to create a circular shape with a rotating radius axis inside, moving at a slow speed. How can this be achieved?
If you're looking to create a custom shape, utilizing SVG for drawing might be the most straightforward approach. Pair this with CSS Animations for seamless rotation effects on your SVG design.
@keyframes rotate {
to { rotate: 360deg }
}
svg {
animation: rotate 10s linear infinite;
width: 150px;
height: 150px;
}
svg .ring {
fill: none;
stroke: black;
stroke-width: 1px;
}
svg .dot {
fill: black;
}
svg .line {
stroke: purple;
stroke-width: 1px;
}
svg .text {
font-size: 10px;
fill: purple;
}<svg viewBox="0 0 100 100">
<circle class="ring" r="49" cx="50" cy="50" />
<circle class="dot" r="2" cx="50" cy="50" />
<line class="line" x1="50" y1="50" x2="99" y2="50" />
<text class="text" x="60" y="47">Radius</text>
</svg>Instructions on how to create a parent element with the class .circle, containing four child divs arranged in a 2x2 grid layout. Adding a top border to the 4th div creates a line, while the text "Radius" is positioned in the 2nd div and pushed down with padding.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
width: 300px;
height: 300px;
border-radius: 100%;
border: solid 1px black;
display: grid;
align-content: center;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
div {
width: 150px;
height: 150px;
}
div:nth-child(2) {
padding-top: 89%;
}
div:nth-child(4) {
border-top: solid 2px red;
}<div class="circle">
<div></div>
<div>Radius</div>
<div></div>
<div></div>
</div>My preferred method would involve utilizing SVG and implementing AnimateTransform to achieve the desired rotation of the line.
AnimateTransform offers the capability to rotate an object around a specific point, allowing for precise control over the rotation. By anchoring the rotation to the center of a circle, you can easily manipulate the angle of the line.
<svg viewBox='0 0 100 100' xmlns="http://www.w3.org/2000/svg">
<circle fill='transparent' stroke='black' cx='50' cy='50' r='35' />
<line stroke='red' x1='50' x2='85' y1='50' y2='50'>
<animateTransform
attributeName='transform'
from='0 50 50'
to='360 50 50'
dur='1.5s'
repeatCount='indefinite'
attributeType='xml'
type='rotate' />
</line>
</svg>This approach eliminates the need for CSS or JavaScript to achieve the desired effect.
Is there a way to access pre-built components directly within the HTML file that links to the build? I've been attempting the following - Inside bundle.js var React = require('react'); var ReactDOM = require('react-dom'); ...
While attempting to run a karma jasmine unit test, I encountered an issue with using angular-mocks and foundation-apps. It's possible that I overlooked something in my setup. I've provided an example project on github for further evaluation due t ...
I want to test a specific function: function initializeView() { var deferred = $q.defer(); if(this.momentArray) { core.listMoments(constants.BEST_MOMENT_PREFIX, '').then(function(moments) { //Ommit ...
I have successfully created a free-hand drawing sketchpad in threeJS with the ability to draw shapes. My next step involves utilizing simplify-JS to simplify the points in my polygon. One issue I am facing is that I am passing my array as buffer geometry ...
I successfully created both a bar chart and a pie chart using d3.js individually. Now, I am trying to load these charts into another HTML file using jQuery. $(document).ready(function() { console.log("ready!"); $("#piediv").load("file:///usr/local ...
Currently, I am utilizing Three.js to implement a video display where users can navigate through the video using their mouse. You can see an example of this functionality here: You can find the code for this project here: https://github.com/mrdoob/three.j ...
On the Sign In page of , I am struggling to extract the value of a label identified by the xpath=".//*[@id='msgIdmmrka']." This particular web element disappears from the DOM a few seconds after entering no email address, a valid password, and cl ...
I am attempting to adjust the size of a UI chip dynamically based on the font size of its parent elements using the em unit in CSS. My objective is to achieve something like this: style={{size:'1em'}} The issue I'm encountering: The chip e ...
I am working with a json object list (carriers) that looks like this: https://i.stack.imgur.com/0FAKw.png Within my *.vue file, I am rendering this using the following code: <tr v-for="carrier in this.carriers"> <td>{{ carrier.id ...
Is there a way to open a new window and transfer some of the HTML content from the original page to the new window? For example: $("div#foo").click( function(){ var copyHTML = $("table.bar").html(); window.open(''); // how can we ...
In the table's body, I am dynamically passing a table from a JavaScript file. For a column, I have returned a textbox as shown below: function (oObj) { return '<div id=\"uniform-chkPerOverage\"> <span ><input t ...
https://i.stack.imgur.com/cFr5Y.pngI am currently working on a project that requires me to overlay a number on top of an icon. Specifically, I am utilizing the MaterialUI ModeComment icon and attempting to display text over it. Despite trying the following ...
I want to retrieve all products from my API. Here is the code snippet for fetching products from the API. The following code snippet is functioning properly: const heh = () => { products.map((p) => console.log(p.id)) } The issue ari ...
I have successfully retrieved data from the database. The structure of the data is as follows: serie --- title (string) --- category (array) To filter the data, I have implemented a search filter using a computed property. This is how it looks: f ...
I am continuously encountering an error regarding an illegal character in Firebug $('#service_chk').click(function () { var $this = $(this); if ($this.is(':checked')) { $('#service').css('display&apos ...
Currently, I am setting a value to a hidden field and attempting to retrieve that value in my JavaScript code. In the declarative part of my code: <asp:HiddenField ID="chkImages" runat="server" /> <div id="main" runat="server" style="display:non ...
Is there a way to center a MaterialUI FAB button and keep it centered while resizing the window? The current positioning is not centered, as seen in the screenshot below, and it does not adjust with window size changes. Below is the code for the current F ...
I'm encountering a small issue with the following code: Html Code : a href="{% url 'entertainment:novelsView' novel.id %}">buttonclass="pull-right btn btn-primary btn-xs">Link span class="fa fa-link"</span></button</a vi ...
Currently, I am utilizing a JS library that comes with a specific widget. Basically, I have the following list (I removed unnecessary DOM code): <li class="disabled"> When I hover over this list item, it turns into: <li class="disabled state-a ...
How can I implement jQuery functionality to toggle the hidden class on an inner div by clicking a button inside a card? I attempted to create a container div containing multiple cards. The issue arises when I click the button - it only opens the panel, bu ...