react小球转圈的加载动画，能点击暂停、继续

求一个h5的加载动画，效果是一个圆形div，一个小球在圆形的线上转圈，能够点击div暂停和继续。
不要jq写，简洁一些，我需要用在react里
大概效果这样，画图略丑，哈哈

图片描述

阅读 5.3k

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .circle { width: 100px; height: 100px; border: 1px solid orange; border-radius: 50%; position: relative; transform-origin: center center; animation: rotate 1s infinite linear; transition: all 1s; } .ball { display: inline-block; width: 10px; height: 10px; background-color: red; border-radius: 50%; position: absolute; left: -5px; top: 45px; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="circle"> <span class="ball"></span> </div> </body> </html>

之前用原生写过一个行星星系，你拿去改改就行了，椭圆方程和圆的方程差不多

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>行星运转</title>
</head>
<style type="text/css">
    body{background: #666;}
    div{position: absolute; border-radius: 50%;}
    #box{width:15px;height:15px;background:#0099FF;}
    #box1{width:25px;height:25px; background: darkorange;}
    #box2{width:30px;height:30px;background:#4169E1;}
    #box3{width:35px;height:35px;background: indianred;}
    #box4{width:40px;height:40px;background:lightgoldenrodyellow}
    #box5{width:45px;height:45px;background:yellowgreen}
    #box6{width:50px;height:50px; background:darkblue}
    #box7{width:60px;height:60px;background:darkslateblue}
    #box8{width:70px;height:70px;background: #000;}
    #taiyang{width:80px;height:80px; left:580px;top:280px; background:orange; box-shadow: 0 0 5px orangered;}
</style>
<script type="text/javascript">
    window.onload = function(){
        var oBox = document.getElementById('box');
        var oBox1 = document.getElementById('box1');
        var oBox2 = document.getElementById('box2');
        var oBox3 = document.getElementById('box3');
        var oBox4 = document.getElementById('box4');
        var oBox5 = document.getElementById('box5');
        var oBox6 = document.getElementById('box6');
        var oBox7 = document.getElementById('box7');
        var oBox8 = document.getElementById('box8');
        move(oBox,5,100,50,610,315);
        move(oBox1,10,150,80,600,315);
        move(oBox2,15,180,100,600,315);
        move(oBox3,20,220,120,600,315);
        move(oBox4,25,280,160,600,315);
        move(oBox5,30,320,200,600,315);
        move(oBox6,35,380,240,600,315);
        move(oBox7,40,430,280,600,315);
        move(oBox8,50,500,320,600,315);
        function move(obj,time,a,b,x,y){//对象，运动时间，长轴，短轴，x方向偏移值，y方向偏移值
             obj.num = 0;
            var x = x||0;
            var y = y||0;
            obj.timer = setInterval(function(){
                obj.num++
                obj.style.left = a*Math.cos(obj.num*Math.PI/180)+x + 'px';
                obj.style.top = b*Math.sin(obj.num*Math.PI/180)+y + 'px';
                if(obj.num < 360){
                    var cDiv = document.createElement('div');
                    cDiv.style.cssText = 'width:1px; height:1px; background:#fff; position:absolute';
                    cDiv.style.left = obj.offsetLeft + obj.offsetHeight/2 + 'px';
                    cDiv.style.top = obj.offsetTop + obj.offsetWidth/2+ 'px';
                    document.body.appendChild(cDiv);
                }
            },time)
        }
    }
</script>
<body>
<div id="box"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<div id="taiyang"></div>
</body>

</html>

react小球转圈的加载动画，能点击暂停、继续

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？